576 lines
15 KiB
Vue
576 lines
15 KiB
Vue
<!-- 物联卡-首页 -->
|
|
<template>
|
|
<page-container>
|
|
<j-row :gutter="[24, 24]">
|
|
<j-col :xxl="14" :xl='24'>
|
|
<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>
|
|
</j-col>
|
|
<j-col :xxl="10" :xl='24'>
|
|
<div class="home-statistics">
|
|
<Guide title="基础统计">
|
|
<template #extra>
|
|
<span class="extra-text" @click="jumpDashboard"
|
|
>详情</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="item in pieChartData"
|
|
:key="item.key"
|
|
class="item-node"
|
|
>
|
|
<div class="item-node-text">
|
|
{{ item.value }}
|
|
</div>
|
|
<div :class="`state ${item.className}`">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="item-index-echarts"
|
|
style="height: 75px; width: 110px"
|
|
>
|
|
<div class="chart" ref="iotCardChart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</j-col>
|
|
<j-col :span="24">
|
|
<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>
|
|
</j-col>
|
|
</j-row>
|
|
</page-container>
|
|
</template>
|
|
|
|
<script setup lang="ts" name='IotCardHome'>
|
|
import { getImage, onlyMessage } from '@/utils/comm';
|
|
import Guide from '../components/Guide.vue';
|
|
import dayjs from 'dayjs';
|
|
import { queryFlow, list } from '@/api/iot-card/home';
|
|
import * as echarts from 'echarts';
|
|
import { useMenuStore } from '@/store/menu';
|
|
import { usePermissionStore } from '@/store/permission';
|
|
|
|
const { proxy } = <any>getCurrentInstance();
|
|
|
|
interface GuideItemProps {
|
|
key: string;
|
|
name: string;
|
|
english: string;
|
|
url: string;
|
|
param?: Record<string, any>;
|
|
index?: number;
|
|
auth: boolean;
|
|
}
|
|
const menuStory = useMenuStore();
|
|
const menuHasPermission = useMenuStore().hasPermission;
|
|
const btnHasPermission = usePermissionStore().hasPermission;
|
|
|
|
// 菜单权限
|
|
const dashBoardUrl = menuHasPermission('iot-card/Dashboard');
|
|
const platformUrl = menuHasPermission('iot-card/Platform/Detail');
|
|
const recordUrl = menuHasPermission('iot-card/Record');
|
|
const cardUrl = menuHasPermission('iot-card/CardManagement');
|
|
|
|
// 按钮权限
|
|
const paltformPermission = btnHasPermission(`iot-card/Platform:add`);
|
|
const cardPermission = btnHasPermission(`iot-card/CardManagement:add`);
|
|
|
|
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: paltformPermission,
|
|
// url: platformUrl,
|
|
url: 'iot-card/Platform/Detail',
|
|
},
|
|
{
|
|
key: 'SCREEN',
|
|
name: '物联卡管理',
|
|
english: 'STEP2',
|
|
auth: !!cardPermission,
|
|
// url: cardUrl,
|
|
url: 'iot-card/CardManagement',
|
|
param: { save: true },
|
|
},
|
|
{
|
|
key: 'CASCADE',
|
|
name: '操作记录',
|
|
english: 'STEP3',
|
|
auth: !!recordUrl,
|
|
// url: recordUrl,
|
|
url: 'iot-card/Record',
|
|
},
|
|
];
|
|
|
|
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.auth){
|
|
onlyMessage('暂无权限，请联系管理员', 'warning');
|
|
return
|
|
}
|
|
if (data.key === 'EQUIPMENT') {
|
|
menuStory.jumpPage(data.url, { id: ':id'});
|
|
} else {
|
|
let params: any = undefined
|
|
if (data.key === 'SCREEN') {
|
|
params = { type: 'add'}
|
|
}
|
|
menuStory.jumpPage(data.url, params);
|
|
}
|
|
};
|
|
|
|
const jumpDashboard = () => {
|
|
menuStory.jumpPage('iot-card/Dashboard');
|
|
};
|
|
|
|
/**
|
|
* 获取昨日流量消耗
|
|
*/
|
|
const getTodayFlow = async () => {
|
|
const beginTime = dayjs().subtract(1, 'days').startOf('day').valueOf();
|
|
const endTime = dayjs().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 = dayjs().subtract(15, 'days').startOf('day').valueOf();
|
|
const endTime = dayjs().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 {
|
|
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>
|