From a4cbbcb82bf6b5f09df1455f6436e4dd8047704a Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 18 三月 2024 14:23:46 +0800
Subject: [PATCH] feat:运行监控模块
---
src/permission.js | 2
src/views/screen/components/screen-wrapper/index.vue | 6 ++-
src/views/screen/components/select-item/index.vue | 0
src/views/screen/components/screen-detection/index.vue | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 113 insertions(+), 3 deletions(-)
diff --git a/src/permission.js b/src/permission.js
index 45c6285..462668d 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@
NProgress.configure({ showSpinner: false })
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register', '/screen']
router.beforeEach((to, from, next) => {
NProgress.start()
diff --git a/src/views/screen/components/screen-detection/index.vue b/src/views/screen/components/screen-detection/index.vue
new file mode 100644
index 0000000..714358d
--- /dev/null
+++ b/src/views/screen/components/screen-detection/index.vue
@@ -0,0 +1,108 @@
+<template>
+ <div class="detection-container">
+ <div class="title-container">
+ <span class="title">杩愯鐩戞帶鏁版嵁</span>
+ </div>
+ <div class="detection-content">
+ <div class="water-item">
+ <dv-water-level-pond :config="config1" style="width:100px;height:100px" />
+ <div class="water-num water-text">6250/0</div>
+ <div class="water-label water-text">鎺ュ叆鐜�</div>
+ </div>
+ <div class="water-item">
+ <dv-water-level-pond :config="config2" style="width:100px;height:100px" />
+ <div class="water-num water-text">6236/6250</div>
+ <div class="water-label water-text">GIS鐜�</div>
+ </div>
+ <div class="water-item">
+ <dv-water-level-pond :config="config3" style="width:100px;height:100px" />
+ <div class="water-num water-text">5962/6250</div>
+ <div class="water-label water-text">鍦ㄧ嚎鐜�</div>
+ </div>
+ <div class="water-item">
+ <dv-water-level-pond :config="config4" style="width:100px;height:100px" />
+ <div class="water-num water-text">5255/5962</div>
+ <div class="water-label water-text">瀹屽ソ鐜�</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ config1: {
+ data: [0],
+ shape: 'round',
+ waveHeight: 5
+ },
+ config2: {
+ data: [99.77],
+ shape: 'round',
+ waveHeight: 5
+ },
+ config3: {
+ data: [95.39],
+ shape: 'round',
+ waveHeight: 5
+ },
+ config4: {
+ data: [88.14],
+ shape: 'round',
+ waveHeight: 5
+ },
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.title-container {
+ background-image: url("../../../../assets/images/screen/title_bg.png");
+ background-size: 231px 100%;
+ background-repeat: no-repeat;
+ height: 38px;
+ width: 100%;
+ position: relative;
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+
+ .title {
+ margin-left: 20px;
+ margin-top: -2px;
+ color: #fff;
+ letter-spacing: 2px;
+ font-size: 20px;
+ font-style: italic;
+ }
+}
+
+.detection-content {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ background: rgba(67, 102, 155, 0.3);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+ padding: 20px 20px;
+}
+
+.water-item {
+ font-size: 18px;
+ color: #fff;
+
+ .water-text {
+ text-align: center;
+ }
+
+ .water-num {
+ margin-top: 20px;
+ }
+
+ .water-label {
+ font-size: 24px;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index c8e55ed..6c44f8e 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -5,7 +5,7 @@
<screen-face></screen-face>
</div>
<div class="center-container wrapper">
-
+ <screen-detection></screen-detection>
</div>
<div class="right-container wrapper">
@@ -16,10 +16,12 @@
<script>
import ScreenFace from '../screen-face/index';
+import ScreenDetection from '../screen-detection/index';
export default {
name: 'ScreenWrapper',
components: {
- ScreenFace
+ ScreenFace,
+ ScreenDetection
},
}
</script>
diff --git a/src/views/screen/components/select-wrapper/index.vue b/src/views/screen/components/select-item/index.vue
similarity index 100%
rename from src/views/screen/components/select-wrapper/index.vue
rename to src/views/screen/components/select-item/index.vue
--
Gitblit v1.8.0