From 448166fbb6a638cb93c142a4922175ea3b677ae0 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期一, 25 三月 2024 18:09:50 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
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 | 8 +-
src/views/screen/components/select-item/index.vue | 54 +++++++++++++
src/views/screen/components/screen-table/index.vue | 156 +++++++++++++++++++++++++++++++++++++++
5 files changed, 222 insertions(+), 13 deletions(-)
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
index e1b84bc..0d3d162 100644
--- a/src/views/screen/components/screen-map/index.vue
+++ b/src/views/screen/components/screen-map/index.vue
@@ -45,7 +45,7 @@
viewControl: {
beta: -30,
alpha: 50,
- distance: 105,
+ distance: 85,
maxBeta: 180,
panSensitivity: 0,
zoomSensitivity: 1,
@@ -93,7 +93,7 @@
viewControl: {
beta: -30,
alpha: 50,
- distance: 105,
+ distance: 85,
maxBeta: 180,
panSensitivity: 0,
zoomSensitivity: 1,
@@ -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() {
diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue
index 168db2c..53a40cd 100644
--- a/src/views/screen/components/select-item/index.vue
+++ b/src/views/screen/components/select-item/index.vue
@@ -7,6 +7,13 @@
</el-select>
</div>
+ <div class="local-select">
+ <div class="select-label">鍦板尯</div>
+ <el-select v-model="localValue" popper-class="type-select" class="select-style" @change="setConfig">
+ <el-option v-for="item in testData2" :key="item.name" :label="item.name" :value="item.value" />
+ </el-select>
+ </div>
+
<div class="date-select">
<div class="select-label">鏃ユ湡</div>
<el-date-picker v-model="dateValue" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�"
@@ -21,6 +28,7 @@
data() {
return {
typeValue: 1,
+ localValue: 1,
dateValue: new Date(),
testData1: [
{
@@ -35,6 +43,36 @@
name: '鍏畨閮ㄦ暟鎹�',
value: 3
}
+ ],
+ testData2: [
+ {
+ name: '瀵岄『鍘�',
+ value: 1,
+ },
+ {
+ name: '鑽ｅ幙',
+ value: 2,
+ },
+ {
+ name: '楂樻柊鍖�',
+ value: 3,
+ },
+ {
+ name: '鑷祦浜曞尯',
+ value: 4,
+ },
+ {
+ name: '璐′簳鍖�',
+ value: 5,
+ },
+ {
+ name: '澶у畨鍖�',
+ value: 6,
+ },
+ {
+ name: '娌挎哗鍖�',
+ value: 7,
+ },
]
}
},
@@ -61,11 +99,25 @@
flex-shrink: 0;
}
+ .local-label {
+ font-size: 20px;
+ margin-right: 10px;
+ color: #2375f0;
+ flex-shrink: 0;
+ }
+
.type-select {
display: flex;
align-items: center;
margin-right: 20px;
- width: 240px;
+ width: 200px;
+ }
+
+ .local-select {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ width: 200px;
}
.date-select {
--
Gitblit v1.8.0