From 45b4ff5c0b824d2e5b51a6af3c44076d05f0214d Mon Sep 17 00:00:00 2001
From: whychdw <496960745@qq.com>
Date: 星期三, 18 十二月 2024 13:21:28 +0800
Subject: [PATCH] 内容提交
---
src/views/dashboard/index.vue | 437 ++++++++++++++++++------------------------------------
1 files changed, 145 insertions(+), 292 deletions(-)
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 6e7da68..2687e05 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,307 +1,160 @@
-<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>
+<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';
- </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>
+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="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 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>
- </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 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>
- </el-col>
- </el-row>
+ </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>
-<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% - 265px);
- }
-}
-
-.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 {
+.dashboard-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: #5e5e5e;
- }
- .icon-text {
- display: inline-block;
- margin-top: 8px;
- font-size: 14px;
- font-weight: 700;
- color: #5e5e5e;
- }
- }
- .data-stats-content {
- flex: 1;
- }
-;
-}
-.num-stats-wrapper {
- padding: 12px;
- text-align: center;
- .num-title {
- color: gray;
- 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;
+ .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>
--
Gitblit v1.9.1