<script>
|
import { defineComponent } from 'vue';
|
import HdwCard from '@/components/HdwCard/index.vue';
|
import LedNum from '@/components/LedNum/index.vue';
|
import LineChart from '@/views/dashboard/components/LineChart.vue';
|
import MapChart from '@/components/Charts/MapChart.vue';
|
|
export default defineComponent({
|
name: 'Dashboard',
|
components: { MapChart, LineChart, LedNum, HdwCard },
|
data() {
|
return {
|
stationNum: 0,
|
devNum: 0,
|
cardNum: 0,
|
chartData: []
|
};
|
},
|
methods: {}
|
});
|
</script>
|
|
<template>
|
<div class="dashboard-wrapper">
|
<div class="dashboard-left">
|
<div class="left-content-list">
|
<div class="left-content-item">
|
<hdw-card is-full title="屏柜类型"></hdw-card>
|
</div>
|
<div class="left-content-item">
|
<hdw-card is-full title="设备工作状态"></hdw-card>
|
</div>
|
<div class="left-content-item last">
|
<hdw-card is-full title="环境状态"></hdw-card>
|
</div>
|
</div>
|
</div>
|
<div class="dashboard-middle">
|
<div class="middle-content-wrapper">
|
<hdw-card>
|
<div class="number-list-wrapper">
|
<div class="number-item">
|
<div class="number-label">站点</div>
|
<div class="number-value">
|
<led-num color="#f00" :num="stationNum"></led-num>
|
</div>
|
</div>
|
<div class="number-item">
|
<div class="number-label">设备</div>
|
<div class="number-value">
|
<led-num color="#f00" :num="devNum"></led-num>
|
</div>
|
</div>
|
<div class="number-item">
|
<div class="number-label">电子卡</div>
|
<div class="number-value">
|
<led-num color="#f00" :num="cardNum"></led-num>
|
</div>
|
</div>
|
</div>
|
</hdw-card>
|
<div class="map-wrapper">
|
<hdw-card is-full>
|
<map-chart></map-chart>
|
</hdw-card>
|
</div>
|
<div class="dev-real-info">
|
<hdw-card title="实时开锁信息" is-full></hdw-card>
|
</div>
|
</div>
|
</div>
|
<div class="dashboard-right">
|
<div class="left-content-list">
|
<div class="left-content-item">
|
<hdw-card is-full title="屏柜品牌"></hdw-card>
|
</div>
|
<div class="left-content-item">
|
<hdw-card is-full title="使用频次"></hdw-card>
|
</div>
|
<div class="left-content-item last">
|
<hdw-card is-full title="告警统计"></hdw-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.dashboard-wrapper {
|
display: flex;
|
flex-direction: row;
|
height: 100%;
|
.dashboard-left{
|
width: 500px;
|
height: 100%;
|
}
|
.dashboard-middle {
|
flex: 1;
|
height: 100%;
|
}
|
.dashboard-right {
|
width: 500px;
|
height: 100%;
|
}
|
}
|
|
.left-content-list {
|
padding: 8px;
|
height: 100%;
|
.left-content-item {
|
height: 33%;
|
padding-bottom: 8px;
|
&.last {
|
height: 34%;
|
padding-bottom: 0;
|
}
|
}
|
}
|
|
.middle-content-wrapper {
|
display: flex;
|
flex-direction: column;
|
padding: 8px 0;
|
height: 100%;
|
.number-list-wrapper {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 10px;
|
margin-top: 8px;
|
.number-item {
|
cursor: pointer;
|
display: flex;
|
// border-radius: 6px;
|
align-items: center;
|
.number-label {
|
white-space: nowrap;
|
background: #0ff;
|
border-radius: 6px;
|
color: #333;
|
font-size: 16px;
|
font-weight: bold;
|
padding: 0 10px;
|
}
|
.number-value {
|
width: 4.5em;
|
height: 1.5em;
|
padding: 0 10px;
|
}
|
}
|
}
|
.map-wrapper {
|
flex: 1;
|
padding: 8px 0;
|
}
|
.dev-real-info {
|
height: 34%;
|
}
|
}
|
</style>
|
