From b5c6e17f2e9cb10ed323c1adfa2e449bab307134 Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期五, 17 一月 2025 15:15:12 +0800
Subject: [PATCH] 考核结果路由跳转、工单详情权限
---
src/views/screen/components/screen-video/index.vue | 216 +++++++++++++++++++++++++-----------------------------
1 files changed, 100 insertions(+), 116 deletions(-)
diff --git a/src/views/screen/components/screen-video/index.vue b/src/views/screen/components/screen-video/index.vue
index e6fd8dd..c7ff5e1 100644
--- a/src/views/screen/components/screen-video/index.vue
+++ b/src/views/screen/components/screen-video/index.vue
@@ -1,149 +1,133 @@
<template>
<div class="video-container">
- <wrapper-title :title="'瑙嗛璁惧'"></wrapper-title>
+ <wrapper-title :title="'瑙嗛璁惧鏁版嵁'" :path="'/monitorServe/video'"></wrapper-title>
+
<div class="video-content">
- <div class="video-plane">
- <dv-border-box-13 class="panel">
- <div class="panel-container">
- <div class="top-container">
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type1">1156</div>
- </dv-decoration-9>
- <div class="data-label">璁惧鎬绘暟</div>
- </div>
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type2">1000</div>
- </dv-decoration-9>
- <div class="data-label">姝ｅ父鏁�</div>
- </div>
+ <div class="data-plane">
+ <dv-border-box-13 class="plane">
+ <div class="data-item">
+ <div class="data-icon">
+ <img src="@/assets/images/screen/icon/icon1.png" alt="" class="width-img">
</div>
- <div class="bottom-container">
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type3">156</div>
- </dv-decoration-9>
- <div class="data-label">寮傚父鏁�</div>
- </div>
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type4">75</div>
- </dv-decoration-9>
- <div class="data-label">鐢熸垚寮傚父宸ュ崟鏁�</div>
- </div>
- <div class="data-item">
- <dv-decoration-9 style="width:120px;height:120px;">
- <div class="data-num type5">91.36%</div>
- </dv-decoration-9>
- <div class="data-label">璁惧杩愯鐜�</div>
- </div>
+ <div class="data-info">
+ <div class="data-lable">璁惧鎬绘暟</div>
+ <div class="data-num type1" v-roll>{{ 1123 }}</div>
</div>
-
-
</div>
+ </dv-border-box-13>
+ <dv-border-box-13 class="plane">
+ <div class="data-item">
+ <div class="data-icon">
+ <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
+ </div>
+ <div class="data-info">
+ <div class="data-lable">姝ｅ父鏁�</div>
+ <div class="data-num type2" v-roll>{{ 2000 }}</div>
+ </div>
+ </div>
+ </dv-border-box-13>
+
+ <dv-border-box-13 class="plane">
+ <div class="data-item">
+ <div class="data-icon">
+ <img src="@/assets/images/screen/icon/icon2.png" alt="" class="width-img">
+ </div>
+ <div class="data-info">
+ <div class="data-lable">寮傚父鏁�</div>
+ <div class="data-num type3" v-roll>{{ 1000 }}</div>
+ </div>
+ </div>
</dv-border-box-13>
</div>
</div>
</div>
+
</template>
<script>
import WrapperTitle from '../wrapper-title/index';
-
export default {
- name: 'ScreenVideo',
+ name: 'ScreenFace',
components: {
WrapperTitle
- }
+ },
+ data() {
+ return {
+ }
+ },
+
+ methods: {
+ },
+
+ mounted() {
+
+ },
}
</script>
<style lang="scss" scoped>
.video-container {
- flex: 1;
+ width: 100%;
+ height: fit-content;
display: flex;
flex-direction: column;
- margin-bottom: 20px;
}
.video-content {
flex: 1;
- background: rgba(67, 102, 155, 0.3);
- border: 1px solid rgba(47, 91, 157, 0.8);
-}
+ background: url('../../../../assets/images/screen/cardBg.png');
+ background-size: cover !important;
+ background-repeat: no-repeat !important;
+ background-position: center center !important;
-.panel {
- width: 100%;
- height: 100%;
-}
-
-.video-plane {
- width: 100%;
-
- .panel-container {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- box-sizing: border;
- padding: 20px;
-
- .top-container,
- .bottom-container {
- width: 100%;
- display: flex;
-
- }
-
- .top-container {
- justify-content: center;
-
- .data-item {
- margin: 0 30px;
- }
- }
-
- .bottom-container {
- justify-content: space-around;
- }
-
- .data-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- font-size: 20px;
- color: #fff;
- .data-num {
- font-weight: bold;
- font-size: 22px;
- }
- }
-
- .type1 {
- color: #0883d4;
- }
-
- .type2 {
- color: #08b108;
- }
-
- .type3 {
- color: #ff0000;
- }
-
- .type4 {
- color: #d82a64;
- }
-
- .type5 {
- color: #08b108;
- }
-
+ .plane {
+ margin-bottom: 10px;
}
+ .data-plane {
+ .data-item {
+ width: 100%;
+ padding: 10px 20px;
+ display: flex;
+ align-items: center;
+
+ .data-icon {
+ width: 40px;
+ margin: 0 20px;
+ }
+
+ .data-info {
+ flex: 1;
+ color: #5b83bd;
+ font-size: 16px;
+
+ .data-num {
+ margin-top: 5px;
+ font-size: 24px;
+ color: #fff;
+ }
+
+ .type1 {
+ color: #287cfa;
+ }
+ .type2 {
+ color: #0cd81d;
+ }
+ .type3 {
+ color: #e20c0c
+ }
+ }
+ }
+ }
+
+ #faceChart {
+ width: 100%;
+ height: 300px;
+ }
}
-</style>
\ No newline at end of file
+
+.width-img {
+ width: 100%;
+}
+</style>
--
Gitblit v1.8.0