<template>
|
<div class="dashboard-container">
|
<hdw-card>
|
<div class="data-stats-header">
|
<el-row :gutter="16">
|
<el-col :span="8">
|
<div class="user-info-wrapper">
|
<el-avatar class="user-icon" :size="30" :src="userImg" />
|
<span class="user-name">武汉源畅</span>
|
<span class="user-change">切换</span>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="data-stats-time-wrapper">
|
<span class="time-title">统计时间：</span>
|
<el-radio-group class="radio-class" v-model="timeType" size="small">
|
<el-radio-button label="本周" :value="0" />
|
<el-radio-button label="本月" :value="1" />
|
<el-radio-button label="本年" :value="2" />
|
</el-radio-group>
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="data-stats-time-wrapper">
|
<span class="time-title">自定义时间：</span>
|
<el-date-picker
|
v-model="rangeTime"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
size="small"
|
/>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
</hdw-card>
|
<div class="data-stats">
|
<el-row :gutter="8">
|
<el-col :span="8">
|
<hdw-card>
|
<div class="data-stats-wrapper">
|
<div class="data-stats-icon">
|
<div class="data-stats-icon-content">
|
<svg-icon icon-class="lock-hdw"/>
|
<br/>
|
<span class="icon-text">锁具统计</span>
|
</div>
|
</div>
|
<div class="data-stats-content">
|
<el-row :gutter="16">
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">已安装</div>
|
<div class="num-value">112</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">未安装</div>
|
<div class="num-value">2</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">蓝牙锁</div>
|
<div class="num-value">112</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">无源锁</div>
|
<div class="num-value">2</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</hdw-card>
|
</el-col>
|
<el-col :span="8">
|
<hdw-card>
|
<div class="data-stats-wrapper">
|
<div class="data-stats-icon">
|
<div class="data-stats-icon-content">
|
<svg-icon icon-class="key-hdw"/>
|
<br/>
|
<span class="icon-text">钥匙统计</span>
|
</div>
|
</div>
|
<div class="data-stats-content">
|
<el-row :gutter="16">
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">实体钥匙</div>
|
<div class="num-value">0</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">设备钥匙</div>
|
<div class="num-value">0</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">蓝牙钥匙</div>
|
<div class="num-value">6</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</hdw-card>
|
</el-col>
|
<el-col :span="8">
|
<hdw-card is-full>
|
<div class="data-stats-wrapper" style="height: 100%">
|
<div class="data-stats-icon">
|
<div class="data-stats-icon-content">
|
<svg-icon icon-class="safe-lock-hdw"/>
|
<br/>
|
<span class="icon-text">事件统计</span>
|
</div>
|
</div>
|
<div class="data-stats-content">
|
<el-row :gutter="16">
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">开锁操作</div>
|
<div class="num-value">0</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="num-stats-wrapper">
|
<div class="num-title">报警事件</div>
|
<div class="num-value">0</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</hdw-card>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="data-stats-footer">
|
<el-row :gutter="8" style="height: 100%">
|
<el-col :span="12" style="height: 100%">
|
<hdw-card title="开锁统计" is-full>
|
<div class="chart-wrapper">
|
<line-chart :chart-data="unlockingData"></line-chart>
|
</div>
|
</hdw-card>
|
</el-col>
|
<el-col :span="12" style="height: 100%">
|
<hdw-card title="快捷入口" is-full>
|
<div class="fast-menu">
|
<el-row :gutter="16">
|
<el-col :span="6">
|
<menu-card></menu-card>
|
</el-col>
|
<el-col :span="6">
|
<menu-card url="/system/user" title="用户管理" icon="people-hdw" style="background-color: #56e0c7"></menu-card>
|
</el-col>
|
<el-col :span="6">
|
<menu-card url="/device/lock" title="锁具管理" icon="lock-hdw" style="background-color: #fe945f"></menu-card>
|
</el-col>
|
<el-col :span="6">
|
<menu-card url="/device/key" title="钥匙管理" icon="key-hdw" style="background-color: #fdcc1c"></menu-card>
|
</el-col>
|
<el-col :span="6">
|
<menu-card url="/general/authorize" title="授权管理" icon="auth-hdw" style="background-color: #5a84fd"></menu-card>
|
</el-col>
|
<el-col :span="6">
|
<menu-card url="/general/log" title="日志管理" icon="log-hdw" style="background-color: #7997b3"></menu-card>
|
</el-col>
|
<el-col :span="6">
|
<menu-card url="/general/map" title="地图定位" icon="map-hdw" style="background-color: #1ab5b1"></menu-card>
|
</el-col>
|
</el-row>
|
</div>
|
</hdw-card>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { defineComponent } from 'vue';
|
import MenuCard from '@/views/dashboard/components/MenuCard.vue';
|
import HdwCard from '@/components/HdwCard/index.vue';
|
import SvgIcon from '@/components/SvgIcon/index.vue';
|
import LineChart from './components/LineChart.vue';
|
import userImg from '@/assets/images/user.png';
|
|
export default defineComponent({
|
name: 'Dashboard',
|
components: { LineChart, SvgIcon, HdwCard, MenuCard },
|
data() {
|
return {
|
unlockingData: [],
|
userImg,
|
timeType: 0,
|
rangeTime: ''
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.dashboard-container {
|
height: 100%;
|
overflow: auto;
|
padding: 8px;
|
.data-stats-footer {
|
min-height: 300px;
|
height: calc(100% - 270px);
|
}
|
}
|
|
.user-info-wrapper {
|
display: inline-block;
|
.user-icon {
|
vertical-align: middle;
|
}
|
.user-name {
|
margin-left: 8px;
|
font-size: 14px;
|
}
|
.user-change {
|
margin-left: 8px;
|
font-size: 14px;
|
color: #409eff;
|
font-weight: 700;
|
cursor: pointer;
|
}
|
}
|
|
.data-stats-time-wrapper {
|
.radio-class {
|
vertical-align: middle;
|
}
|
.time-title {
|
margin-right: 8px;
|
font-size: 14px;
|
display: inline-block;
|
}
|
}
|
|
.data-stats {
|
margin-top: 8px;
|
padding-bottom: 8px;
|
}
|
.data-stats-wrapper {
|
display: flex;
|
flex-direction: row;
|
padding: 16px;
|
.data-stats-icon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
flex-direction: column;
|
.svg-icon {
|
font-size: 100px;
|
color: var(--light-color);
|
}
|
.icon-text {
|
display: inline-block;
|
margin-top: 8px;
|
font-size: 14px;
|
font-weight: 700;
|
color: var(--light-color);
|
}
|
}
|
.data-stats-content {
|
flex: 1;
|
}
|
;
|
}
|
.num-stats-wrapper {
|
padding: 12px;
|
text-align: center;
|
.num-title {
|
color: var(--light-color);
|
font-size: 14px;
|
}
|
.num-value {
|
font-size: 30px;
|
font-weight: 700;
|
}
|
}
|
.fast-menu {
|
text-align: center;
|
.el-col {
|
padding: 32px 0;
|
}
|
}
|
.chart-wrapper {
|
height: 100%;
|
overflow: hidden;
|
}
|
</style>
|
