feat: 添加物联卡首页
This commit is contained in:
blp
parent
a8b9108462
commit
b971bda7ac
|
|
@ -0,0 +1,6 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
// 查询特定天数流量数据
|
||||
export const queryFlow = (beginTime: any, endTime: any, data: any) => server.post(`/network/flow/_query/${beginTime}/${endTime}`, data)
|
||||
|
||||
export const list = (data: any) => server.post(`/network/card/_query`, data)
|
||||
|
|
@ -76,4 +76,9 @@ export default [
|
|||
path: '/init-home',
|
||||
component: () => import('@/views/init-home/index.vue')
|
||||
},
|
||||
// 物联卡 iot-card
|
||||
{
|
||||
path: '/iot-card/home',
|
||||
component: () => import('@/views/iot-card/Home/index.vue')
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,541 @@
|
|||
<!-- 物联卡-首页 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="14">
|
||||
<div class="home-guide">
|
||||
<Guide title="物联卡引导"></Guide>
|
||||
<div
|
||||
class="home-guide-items"
|
||||
:style="`grid-template-columns: repeat(${
|
||||
guideList ? guideList.length : 1
|
||||
}, 1fr);`"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in guideList"
|
||||
:key="index"
|
||||
class="home-guide-item step-bar arrow-2 pointer"
|
||||
@click="jumpPage(item)"
|
||||
>
|
||||
<div class="item-english">{{ item.english }}</div>
|
||||
<div class="item-title">{{ item.name }}</div>
|
||||
<div class="item-index">
|
||||
<img :src="Image[index + 1]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="10">
|
||||
<div class="home-statistics">
|
||||
<Guide title="基础统计">
|
||||
<template #extra>
|
||||
<span class="extra-text">详情</span>
|
||||
</template>
|
||||
</Guide>
|
||||
<div class="home-statistics-body">
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">昨日流量统计</div>
|
||||
<div class="item-title">{{ currentSource }} M</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="todayFlowChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-guide-item">
|
||||
<div class="item-english">物联卡</div>
|
||||
<div class="item-content">
|
||||
<div
|
||||
v-for="iten in pieChartData"
|
||||
:key="iten.key"
|
||||
class="item-node"
|
||||
>
|
||||
<div class="item-node-text">
|
||||
{{ iten.value }}
|
||||
</div>
|
||||
<div :class="`state ${iten.className}`">
|
||||
{{ iten.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-index-echarts"
|
||||
style="height: 75px; width: 110px"
|
||||
>
|
||||
<div class="chart" ref="iotCardChart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="24" style="min-height: 580px">
|
||||
<div class="home-body">
|
||||
<Guide title="平台架构图" english="PLATFORM ARCHITECTURE DIAGRAM" />
|
||||
<div class="home-body-img">
|
||||
<img :src="getImage('/iot-card/iotcard-home.png')" />
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import Guide from '../components/Guide.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import moment from 'moment';
|
||||
import { queryFlow, list } from '@/api/iot-card/home';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const router = useRouter();
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
|
||||
interface GuideItemProps {
|
||||
key: string;
|
||||
name: string;
|
||||
english: string;
|
||||
url: string;
|
||||
param?: Record<string, any>;
|
||||
index?: number;
|
||||
auth: boolean;
|
||||
}
|
||||
|
||||
const Image = {
|
||||
1: getImage('/home/1.png'),
|
||||
2: getImage('/home/2.png'),
|
||||
3: getImage('/home/3.png'),
|
||||
};
|
||||
const guideList = [
|
||||
{
|
||||
key: 'EQUIPMENT',
|
||||
name: '平台对接',
|
||||
english: 'STEP1',
|
||||
auth: '',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
key: 'SCREEN',
|
||||
name: '物联卡管理',
|
||||
english: 'STEP2',
|
||||
auth: '',
|
||||
url: '',
|
||||
param: { save: true },
|
||||
},
|
||||
{
|
||||
key: 'CASCADE',
|
||||
name: '操作记录',
|
||||
english: 'STEP3',
|
||||
auth: '',
|
||||
url: '',
|
||||
},
|
||||
];
|
||||
|
||||
const currentSource = ref<number>(0);
|
||||
const barChartData = ref<any[]>([]);
|
||||
const pieChartData = ref<any[]>([
|
||||
{
|
||||
key: 'using',
|
||||
name: '正常',
|
||||
value: 0,
|
||||
className: 'normal',
|
||||
},
|
||||
{
|
||||
key: 'toBeActivated',
|
||||
name: '未激活',
|
||||
value: 0,
|
||||
className: 'notActive',
|
||||
},
|
||||
{
|
||||
key: 'deactivate',
|
||||
name: '停用',
|
||||
value: 0,
|
||||
className: 'stopped',
|
||||
},
|
||||
]);
|
||||
|
||||
const jumpPage = (data: GuideItemProps) => {
|
||||
if (data.url && data.auth) {
|
||||
router.push(`${data.url}`, data.param);
|
||||
} else {
|
||||
message.warning('暂无权限，请联系管理员');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取昨日流量消耗
|
||||
*/
|
||||
const getTodayFlow = async () => {
|
||||
const beginTime = moment().subtract(1, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
resp.result.map((item: any) => {
|
||||
currentSource.value += parseFloat(item.value.toFixed(2));
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取最近15天流量消耗统计图数据
|
||||
*/
|
||||
const get15DaysTrafficConsumption = async () => {
|
||||
const beginTime = moment().subtract(15, 'days').startOf('day').valueOf();
|
||||
const endTime = moment().subtract(1, 'days').endOf('day').valueOf();
|
||||
const resp: any = await queryFlow(beginTime, endTime, { orderBy: 'date' });
|
||||
barChartData.value = resp.result
|
||||
.map((item: any) => ({
|
||||
...item,
|
||||
}))
|
||||
.reverse();
|
||||
createBarChart();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取物联卡状态数据
|
||||
*/
|
||||
const getStateCard = async () => {
|
||||
Promise.all(
|
||||
pieChartData.value.map((item) => {
|
||||
const params = {
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'cardStateType',
|
||||
termType: 'eq',
|
||||
value: item.key,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
return list(params);
|
||||
}),
|
||||
)
|
||||
.then((resp) => {
|
||||
resp.forEach((i: any, index) => {
|
||||
if (i.success) {
|
||||
pieChartData.value[index].value = i.result.total;
|
||||
}
|
||||
});
|
||||
createPieChart();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 最近15天流量消耗统计图
|
||||
*/
|
||||
const createBarChart = () => {
|
||||
const myChart = echarts.init(proxy.$refs.todayFlowChart);
|
||||
|
||||
const options = {
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
show: false,
|
||||
data: barChartData.value.map((m) => m.date),
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '流量消耗',
|
||||
type: 'bar',
|
||||
color: '#FACD89',
|
||||
// barWidth: '5%', // 设单柱状置宽度
|
||||
showBackground: true, //设置柱状的背景虚拟
|
||||
data: barChartData.value.map((m) => parseFloat(m.value.toFixed(2))),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
/**
|
||||
* 物联卡饼图
|
||||
*/
|
||||
const createPieChart = () => {
|
||||
nextTick(() => {
|
||||
const myChart = echarts.init(proxy.$refs.iotCardChart);
|
||||
|
||||
const options = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)',
|
||||
},
|
||||
color: ['#85a5ff', '#f29b55', '#c4c4c4'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
avoidLabelOverlap: true, //是否启用防止标签重叠策略
|
||||
radius: ['50%', '90%'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(255,255,255,1)',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
data: pieChartData.value,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
barChartData.value,
|
||||
() => {
|
||||
createBarChart();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
getTodayFlow();
|
||||
get15DaysTrafficConsumption();
|
||||
getStateCard();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-base {
|
||||
position: relative;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.home-guide {
|
||||
margin-bottom: 24px;
|
||||
padding: 24px 16px;
|
||||
background-color: #fff;
|
||||
|
||||
.home-guide-items {
|
||||
display: grid;
|
||||
grid-column-gap: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.home-guide-item {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
background: linear-gradient(
|
||||
135.62deg,
|
||||
#f6f7fd 22.27%,
|
||||
rgba(255, 255, 255, 0.86) 91.82%
|
||||
);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 4px 18px #efefef;
|
||||
.state {
|
||||
position: relative;
|
||||
padding-left: 8px;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin-right: 2px;
|
||||
content: '';
|
||||
}
|
||||
&.normal::before {
|
||||
background: #85a5ff;
|
||||
}
|
||||
&.notActive::before {
|
||||
background: #f29b55;
|
||||
}
|
||||
&.stopped::before {
|
||||
background: #c4c4c4;
|
||||
}
|
||||
}
|
||||
|
||||
&.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.item-english {
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
margin-top: 15px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.item-node {
|
||||
min-width: 58px;
|
||||
margin-right: 8px;
|
||||
z-index: 1;
|
||||
|
||||
.item-node-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 20px 0;
|
||||
color: @text-color;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.item-index {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.item-index-echarts {
|
||||
.item-index;
|
||||
|
||||
right: 12px;
|
||||
bottom: 5%;
|
||||
z-index: 0;
|
||||
width: 50%;
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-body {
|
||||
.home-base;
|
||||
|
||||
min-height: 444px;
|
||||
margin-bottom: 24px;
|
||||
// padding-bottom: 26.5%;
|
||||
padding-bottom: 30%;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #2f54eb;
|
||||
|
||||
.home-body-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-statistics {
|
||||
.home-base;
|
||||
|
||||
.extra-text {
|
||||
cursor: pointer;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.home-statistics-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -60px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
transform: translateY(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.home-step {
|
||||
.home-base;
|
||||
|
||||
.home-step-items {
|
||||
display: grid;
|
||||
grid-column-gap: 66px;
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.step-item-title {
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
background-color: #f8f9fd;
|
||||
cursor: pointer;
|
||||
|
||||
.step-item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
> span {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.step-item-content {
|
||||
flex-grow: 1;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
border-right: 1px solid #e5edf4;
|
||||
border-bottom: 1px solid #e5edf4;
|
||||
border-left: 1px solid #e5edf4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-bar {
|
||||
position: relative;
|
||||
|
||||
&.arrow-1 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
|
||||
background: url('/images/home/arrow-1.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.arrow-2 {
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
.step-item-after;
|
||||
|
||||
background: url('/images/home/arrow-2.png') no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="home-title">
|
||||
<div>{{ title }}</div>
|
||||
<div class="extra-text">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
<div class="home-title-english">{{ english }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="Guide">
|
||||
interface guideProps {
|
||||
title: string;
|
||||
english?: string;
|
||||
}
|
||||
|
||||
const props = defineProps<guideProps>();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.home-title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
padding-left: 18px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: @primary-color;
|
||||
border: 1px solid #b4c0da;
|
||||
transform: translateY(-50%);
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
.extra-text {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.home-title-english {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue