From 452952670b6edb4a1a2cc70d97f212bddb844cd0 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Wed, 8 Mar 2023 17:03:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E7=BB=84=E4=BB=B6=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AiDvRender.vue                     |   7 +-
 components/layout/AiDvTable/AiDvTable.vue     |  84 +++++++++++++++---
 components/layout/AiDvTable/asset/rankbg.png  | Bin 0 -> 284 bytes
 .../bigscreen/designer/components/preview.vue |  18 ++++
 4 files changed, 97 insertions(+), 12 deletions(-)
 create mode 100644 components/layout/AiDvTable/asset/rankbg.png

diff --git a/components/AiDvRender.vue b/components/AiDvRender.vue
index 80913b73..7790ba89 100644
--- a/components/AiDvRender.vue
+++ b/components/AiDvRender.vue
@@ -30,7 +30,12 @@
         :limitArea="data.limitArea === '1'"
         :is3dAround="data.is3dAround === '1'">
       </ai-q-map> -->
-      <AiDvTable v-else-if="data.type === 'AiDvTable'" :heigth="'100%'" :data="values"/>
+      <AiDvTable
+        v-else-if="data.type === 'AiDvTable'"
+        :heigth="'100%'"
+        :isShowIndex="data.isShowIndex"
+        :data="values">
+      </AiDvTable>
       <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'"
               :map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib" :onlyShowArea="data.limitArea==1"/>
       <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
diff --git a/components/layout/AiDvTable/AiDvTable.vue b/components/layout/AiDvTable/AiDvTable.vue
index af00fa93..9546946d 100644
--- a/components/layout/AiDvTable/AiDvTable.vue
+++ b/components/layout/AiDvTable/AiDvTable.vue
@@ -1,11 +1,23 @@
 <template>
   <div class="aiDvTable">
     <div class="header">
-      <span v-for="(item, index) in header" :key="index">{{ item }}</span>
+      <span
+        v-for="(item, index) in header"
+        :key="index"
+        :style="{
+        width: item.width + 'px', flex: item.width ? 'inherit' : 1}">
+        {{ item.v }}
+      </span>
     </div>
     <div class="body">
       <div class="row" v-for="(item, index) in body" :key="index">
-        <span v-for="(column, i) in item" :key="i">{{ column }}</span>
+        <div
+          v-for="(column, i) in item"
+          :key="i"
+          :style="{color: column.color, width: column.width + 'px', flex: column.width ? 'inherit' : 1}">
+          <i v-if="isShowIndex === '1' && i === 0">{{ index + 1 }}</i>
+          <span>{{ column.v }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -19,13 +31,19 @@
       data: {
         type: Array,
         default: () => []
+      },
+
+      isShowIndex: {
+        type: String,
+        default: '0'
       }
     },
 
     data () {
       return {
         header: [],
-        body: []
+        body: [],
+        colorIndex: ''
       }
     },
 
@@ -52,12 +70,26 @@
         }
 
         const headerKey = Object.keys(value[0])[0]
-        const bodyKey = Object.keys(value[0]).filter(v => v !== headerKey)
-        this.header = this.data.map(v => v[headerKey])
-        this.body = bodyKey.map(v => {
-          return value.map(e => e[v])
+        const bodyKey = Object.keys(value[0]).filter(v => {
+          return v !== headerKey && v !== 'color' && v !== 'width'
+        })
+
+        this.header = value.map(v => {
+          return {
+            v: v[headerKey],
+            width: v.width || ''
+          }
+        })
+        console.log(this.header)
+        this.body = bodyKey.map(v => {
+          return value.map(e => {
+            return {
+              v: e[v],
+              color: e.color,
+              width: e.width || ''
+            }
+          })
         })
-        console.log(this.body)
       }
     }
   }
@@ -65,6 +97,8 @@
 
 <style lang="scss" scoped>
   .aiDvTable {
+    height: 100%;
+    overflow: hidden;
     .header {
       display: flex;
       align-items: center;
@@ -77,7 +111,7 @@
         flex: 1;
         font-size: 16px;
         text-align: center;
-        color: #bfc0bb;
+        color: rgba(255, 255, 255, 0.7);
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -90,14 +124,20 @@
     }
 
     .body {
-      padding: 10px;
+      height: calc(100% - 40px);
+      padding: 10px 12px;
+      overflow-y: auto;
+      box-sizing: border-box;
       .row {
         display: flex;
         align-items: center;
         width: 100%;
         height: 52px;
 
-        span {
+        div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
           flex: 1;
           font-size: 16px;
           text-align: center;
@@ -107,7 +147,29 @@
           text-overflow: ellipsis;
           -o-text-overflow:ellipsis;
 
+          span {
+            flex: 1;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            -o-text-overflow:ellipsis;
+          }
+
+          i {
+            width: 20px;
+            height: 20px;
+            line-height: 20px;
+            margin-right: 10px;
+            text-align: center;
+            font-size: 12px;
+            color: #18FEFE;
+            font-style: normal;
+            background: url(./asset/rankbg.png) no-repeat;
+            background-size: 100% 100%;
+          }
+
           &:first-child {
+            justify-content: start;
             text-align: left;
           }
         }
diff --git a/components/layout/AiDvTable/asset/rankbg.png b/components/layout/AiDvTable/asset/rankbg.png
new file mode 100644
index 0000000000000000000000000000000000000000..403c139389164febc2cbd066bd9735f8272b1863
GIT binary patch
literal 284
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc3?z4jzqJQaHUT~%u9E-%O90Woe?S2sNfO$~
zvFb3$(2^j(U?9!F$imLa+tS|MH(}3#6DLn!=QD5H4iv8Tba4!+xV3b`LB2x{94_e$
z*RTEme|_6)reobp3;ETGl0O;sI~@Hk@LEd8@zgd+Y5vo~QvKVcQ|#SpoC-4yDw={`
zT}ph>d2q9k+=DZEo@rt~tLIPtVf)8>NyeiU$M2U&+^UF^TT~`-Wn$ow5Q(Ht?wvdl
gWqUV!Z94x}zh1_|LT6w9dXV!xUHx3vIVCg!01K~u6951J

literal 0
HcmV?d00001

diff --git a/packages/bigscreen/designer/components/preview.vue b/packages/bigscreen/designer/components/preview.vue
index 7bb490e0..794c5109 100644
--- a/packages/bigscreen/designer/components/preview.vue
+++ b/packages/bigscreen/designer/components/preview.vue
@@ -51,5 +51,23 @@ export default {
 
 <style lang="scss" scoped>
 .preview {
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 14px;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    min-height: 20px;
+    background-clip: content-box;
+    box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+  }
+
+  ::-webkit-scrollbar-track {
+    box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+  }
 }
 </style>