From 8d68547577af7c1230da7b8a32a797854b711ec7 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期一, 25 三月 2024 16:52:54 +0800
Subject: [PATCH] feat:表格数据
---
src/views/screen/components/screen-title/index.vue | 8 +-
src/views/screen/components/screen-wrapper/index.vue | 9 +-
src/views/screen/components/screen-map/index.vue | 4
src/views/screen/components/screen-table/index.vue | 156 ++++++++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 167 insertions(+), 10 deletions(-)
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
index e1b84bc..d736389 100644
--- a/src/views/screen/components/screen-map/index.vue
+++ b/src/views/screen/components/screen-map/index.vue
@@ -236,8 +236,8 @@
.map-content {
flex: 1;
- background: rgba(67, 102, 155, 0.3);
- border: 1px solid rgba(47, 91, 157, 0.8);
+ // background: rgba(67, 102, 155, 0.3);
+ // border: 1px solid rgba(47, 91, 157, 0.8);
}
.map-style {
diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue
new file mode 100644
index 0000000..d1a90d1
--- /dev/null
+++ b/src/views/screen/components/screen-table/index.vue
@@ -0,0 +1,156 @@
+<template>
+ <div class="table-container">
+ <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 prop="data1" label="浜鸿劯璁惧鎬绘暟" align="center">
+ </el-table-column>
+ <el-table-column prop="data2" label="杞﹁締璁惧鎬绘暟" align="center">
+ </el-table-column>
+ <el-table-column prop="data3" label="瑙嗛璁惧鎬绘暟" align="center">
+ </el-table-column>
+ </el-table>
+ </div>
+
+ </div>
+</template>
+
+<script>
+export default {
+ 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
+ },
+ ]
+ }
+ },
+ methods: {
+ computedHeight() {
+ this.$nextTick(() => {
+ 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: 355px;
+ position: relative;
+ background: rgba(67, 102, 155, 0.3);
+ border: 1px solid rgba(47, 91, 157, 0.8);
+
+ .table-content {
+ position: absolute;
+ width: 100%;
+ top: 0;
+ bottom: 0;
+ }
+}
+
+
+
+.rank-table {
+ background-color: transparent !important;
+ color: #fff !important;
+
+ //婊氬姩鏉＄殑鑳屾櫙鑹�
+ ::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+}
+
+::v-deep .el-table tr {
+ background-color: transparent !important;
+}
+
+::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,
+.el-table--border {
+ border: 0;
+}
+
+::v-deep .el-table th.el-table__cell.is-leaf,
+.el-table td.el-table__cell {
+ border-color: #56739e99 !important;
+}
+
+::v-deep .el-table--border .el-table__cell {
+ border-color: #56739e99 !important;
+}
+
+::v-deep .el-table th.el-table__cell>.cell {
+ color: #447ED6;
+}
+
+::v-deep .el-scrollbar__bar.is-vertical {
+ display: none !important;
+}
+
+::v-deep .el-table::before,
+.el-table--group::after,
+.el-table--border::after {
+ background-color: transparent !important;
+}
+
+::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
diff --git a/src/views/screen/components/screen-title/index.vue b/src/views/screen/components/screen-title/index.vue
index 7dd1f76..53aa4f5 100644
--- a/src/views/screen/components/screen-title/index.vue
+++ b/src/views/screen/components/screen-title/index.vue
@@ -5,7 +5,7 @@
<img src="@/assets/images/screen/header_bg.png" class="width-img" alt="">
</div>
<div class="header-text">
- 鑷础甯傝繍缁磋�冩牳鍙鍖�
+ 澶у睆
</div>
</div>
</div>
@@ -19,7 +19,7 @@
<style lang="scss" scoped>
.header-container {
- width: 1000px;
+ width: 600px;
position: absolute;
top: 0;
left: 50%;
@@ -33,9 +33,9 @@
.header-text {
position: absolute;
left: 49%;
- top: 15px;
+ top: 5px;
transform: translateX(-50%);
color: #fff;
- font-size: 30px;
+ 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 35e0763..0f67a02 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -12,7 +12,8 @@
</div>
<div class="center-container center-wrapper">
<screen-map></screen-map>
- <screen-detection></screen-detection>
+ <screen-table></screen-table>
+ <!-- <screen-detection></screen-detection> -->
</div>
<div class="right-container wrapper">
@@ -25,21 +26,21 @@
<script>
import SelectItem from '../select-item/index';
import ScreenFace from '../screen-face/index';
-import ScreenDetection from '../screen-detection/index';
import ScreenExamine from '../screen-examine/index';
import ScreenVideo from '../screen-video/index';
import ScreenCar from '../screen-car/index';
import ScreenMap from '../screen-map/index';
+import ScreenTable from '../screen-table/index';
export default {
name: 'ScreenWrapper',
components: {
SelectItem,
ScreenFace,
- ScreenDetection,
ScreenExamine,
ScreenVideo,
ScreenCar,
- ScreenMap
+ ScreenMap,
+ ScreenTable
},
methods: {
returnPath() {
--
Gitblit v1.8.0