From 3c6bdb6f439ff7af04765259fd6a91b6d201d095 Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 19 六月 2025 17:12:25 +0800
Subject: [PATCH] 工单，数据中心用户查看数据的权限，合同考核每日，以及导出每日和按月
---
src/views/screen/components/screen-table/index.vue | 262 +++++++++++++++++++++++++++++++++++----------------
1 files changed, 178 insertions(+), 84 deletions(-)
diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue
index df8fd27..c3d8812 100644
--- a/src/views/screen/components/screen-table/index.vue
+++ b/src/views/screen/components/screen-table/index.vue
@@ -1,83 +1,154 @@
<template>
<div class="table-container">
+ <!-- <wrapper-title
+ :title="'鍖哄煙璁惧鏁版嵁'"
+ :path="'/monitorServe/recovery'"
+ ></wrapper-title> -->
<div class="table-content" ref="tabContent">
- <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
- <el-table-column prop="name" label="鍦板尯" align="center" width="100">
- </el-table-column>
- <el-table-column label="浜鸿劯璁惧" align="center">
- <el-table-column prop="data1" label="璁惧姝ｅ父鏁�" align="center">
+ <div class="table-wrapper">
+ <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
+ <el-table-column prop="area" label="鍦板尯" align="center" width="100">
</el-table-column>
- <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center">
- </el-table-column>
- </el-table-column>
- <el-table-column label="杞﹁締璁惧" align="center">
- <el-table-column prop="data1" label="璁惧姝ｅ父鏁�" align="center">
- </el-table-column>
- <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center">
- </el-table-column>
- </el-table-column>
- <el-table-column label="瑙嗛璁惧" align="center">
- <el-table-column prop="data1" label="璁惧姝ｅ父鏁�" align="center">
- </el-table-column>
- <el-table-column prop="data1" label="璁惧寮傚父鏁�" align="center">
- </el-table-column>
- </el-table-column>
- </el-table>
- </div>
+ <el-table-column label="浜鸿劯璁惧" align="center">
+ <template slot-scope="scope">
+ <el-tooltip placement="top">
+ <div slot="content">
+ <div class="tip-item">
+ <div class="tip-label">姝ｅ父鏁�:</div>
+ <div class="tip-info tip-success">
+ {{ scope.row.faceNormalNum }}
+ </div>
+ </div>
+ <div class="tip-item">
+ <div class="tip-label">寮傚父鏁�:</div>
+ <div class="tip-info tip-danger">
+ {{ scope.row.faceErrorNum }}
+ </div>
+ </div>
+ </div>
+ <div class="tip-num">
+ {{ scope.row.faceRate ? scope.row.faceRate + '%' : '--' }}
+ </div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="杞﹁締璁惧" align="center">
+ <template slot-scope="scope">
+ <el-tooltip placement="top">
+ <div slot="content">
+ <div class="tip-item">
+ <div class="tip-label">姝ｅ父鏁�:</div>
+ <div class="tip-info tip-success">
+ {{ scope.row.carNormalNum }}
+ </div>
+ </div>
+ <div class="tip-item">
+ <div class="tip-label">寮傚父鏁�:</div>
+ <div class="tip-info tip-danger">
+ {{ scope.row.carErrorNum }}
+ </div>
+ </div>
+ </div>
+ <div class="tip-num">
+ {{ scope.row.carRate ? scope.row.carRate + '%' : '--' }}
+ </div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+
+ <el-table-column label="瑙嗛璁惧" align="center">
+ <template slot-scope="scope">
+ <el-tooltip placement="top">
+ <div slot="content">
+ <div class="tip-item">
+ <div class="tip-label">姝ｅ父鏁�:</div>
+ <div class="tip-info tip-success">
+ {{ scope.row.videoNormalNum }}
+ </div>
+ </div>
+ <div class="tip-item">
+ <div class="tip-label">寮傚父鏁�:</div>
+ <div class="tip-info tip-danger">
+ {{ scope.row.videoErrorNum }}
+ </div>
+ </div>
+ </div>
+ <div class="tip-num">
+ {{ scope.row.videoRate ? scope.row.videoRate + '%' : '--' }}
+ </div>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
</div>
</template>
<script>
+import WrapperTitle from "../wrapper-title/index";
+
export default {
+ name: "ScreenTable",
+ props: {
+ tableData: {
+ type: Array,
+ default: null,
+ },
+ },
+ components: {
+ WrapperTitle,
+ },
data() {
return {
tableHeight: 40,
- tableData: [
- {
- name: '瀵岄『鍘�',
- data1: 1123,
- data2: 1123,
- data3: 1123
- },
- {
- name: '鑽ｅ幙',
- data1: 1123,
- data2: 1123,
- data3: 1123
- },
- {
- name: '楂樻柊鍖�',
- data1: 1123,
- data2: 1123,
- data3: 1123
- },
- {
- name: '鑷祦浜曞尯',
- data1: 1123,
- data2: 1123,
- data3: 1123
- },
- {
- name: '璐′簳鍖�',
- data1: 1123,
- data2: 1123,
- data3: 1123
- },
- {
- name: '澶у畨鍖�',
- data1: 1123,
- data2: 1123,
- data3: 1123
- },
- {
- name: '娌挎哗鍖�',
- data1: 1123,
- data2: 1123,
- data3: 1123
- },
- ]
- }
+ // tableData: [
+ // {
+ // name: "瀵岄『鍘�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "鑽ｅ幙",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "楂樻柊鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "鑷祦浜曞尯",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "璐′簳鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "澶у畨鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // {
+ // name: "娌挎哗鍖�",
+ // data1: 1123,
+ // data2: 1123,
+ // data3: 1123,
+ // },
+ // ],
+ };
},
methods: {
computedHeight() {
@@ -85,34 +156,34 @@
setTimeout(() => {
const content = this.$refs.tabContent;
this.tableHeight = content.offsetHeight;
- })
- })
- }
+ });
+ });
+ },
},
mounted() {
this.computedHeight();
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
.table-container {
width: 100%;
// flex: 1;
- height: 350px;
+ height: 240px;
position: relative;
- background: rgba(67, 102, 155, 0.3);
- border: 1px solid rgba(47, 91, 157, 0.8);
+
+ display: flex;
+ flex-direction: column;
.table-content {
- position: absolute;
- width: 100%;
- top: 0;
- bottom: 0;
+ flex: 1;
+ // background: url("../../../../assets/images/screen/cardBg.png");
+ // background-size: cover !important;
+ // background-repeat: no-repeat !important;
+ // background-position: center center !important;
}
}
-
-
.rank-table {
background-color: transparent !important;
@@ -131,7 +202,6 @@
::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
background-color: transparent !important;
-
}
::v-deep .el-table--group,
@@ -149,7 +219,7 @@
}
::v-deep .el-table th.el-table__cell>.cell {
- color: #447ED6;
+ color: #447ed6;
}
::v-deep .el-scrollbar__bar.is-vertical {
@@ -165,4 +235,28 @@
::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background-color: #447ed648;
}
-</style>
\ No newline at end of file
+
+.tip-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 10px;
+ font-size: 16px;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+
+ .tip-label {
+ color: #5b83bd;
+ margin-right: 10px;
+ }
+
+ .tip-success {
+ color: #0cd81d;
+ }
+
+ .tip-danger {
+ color: #e20c0c;
+ }
+}
+</style>
--
Gitblit v1.8.0