中建四局(安全管理)：完成安全巡检列表布局

src/views/projectAdmin/zjsj/security/leftTop.vue

@@ -62,6 +62,24 @@
         </div>
       </div>
     </div>
+    <div class="security-list">
+      <div class="thead">
+        <div class="row">
+          <div class="td">事件类型</div>
+          <div class="td">上报时间</div>
+          <div class="td">处理状态</div>
+        </div>
+      </div>
+      <div class="tbody">
+        <vue-scroll>
+          <div class="row" :class="fmtStatusColor(item.status)" v-for="(item, index) in list" :key="index">
+            <div class="td">{{ fmtType(item.type) }}</div>
+            <div class="td">{{ item.datetime }}</div>
+            <div class="td" :class="fmtStatusColor(item.status)">{{ fmtStatus(item.status) }}</div>
+          </div>
+        </vue-scroll>
+      </div>
+    </div>
   </Card>
 </template>
 
@@ -69,18 +87,41 @@
 import Card from '../components/Card.vue'
 import JRingChart from '../../common/jChart/pie/JRingChart.vue'
 export default {
-  components: { Card, JRingChart }
+  components: { Card, JRingChart },
+  data() {
+    return {
+      list: [
+        { type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
+        { type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
+        { type: 3, datetime: '2022-02-02 13:39:09', status: 3 },
+        { type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
+        { type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
+        { type: 3, datetime: '2022-02-02 13:39:09', status: 3 }
+      ]
+    }
+  },
+  methods: {
+    fmtType(type) {
+      return type === 1 ? '物料堆放' : type === 2 ? '未戴安全帽' : type === 3 ? '未穿反光衣' : '--'
+    },
+    fmtStatus(status) {
+      return status === 1 ? '未处理' : status === 2 ? '已处理' : status === 3 ? '整改中' : '--'
+    },
+    fmtStatusColor(status) {
+      return status === 1 ? 'orange' : status === 2 ? 'green' : status === 3 ? 'blue' : ''
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
 .charts {
-  height: 100%;
+  height: 50%;
   display: flex;
   color: #fff;
   .dllm {
     flex: 1;
-    height: 50%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -130,4 +171,51 @@ export default {
     }
   }
 }
+.security-list {
+  height: 50%;
+  color: #fff;
+  .thead {
+    color: #6ae3eb;
+  }
+  .tbody {
+    height: calc(100% - 36px);
+    font-size: 14px;
+  }
+  .row {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    display: flex;
+    &.orange {
+      background: linear-gradient(90deg, #e7622a99, #e7622a33);
+      &::before {
+        content: '';
+        width: 4px;
+        height: 100%;
+        background-color: #e7622a;
+      }
+    }
+    .td {
+      text-align: center;
+      &:nth-child(1) {
+        width: 30%;
+      }
+      &:nth-child(2) {
+        width: calc(70% - 70px);
+      }
+      &:nth-child(3) {
+        width: 70px;
+      }
+      &.orange {
+        color: #e7622a;
+      }
+      &.green {
+        color: #40cdad;
+      }
+      &.blue {
+        color: #64ccd9;
+      }
+    }
+  }
+}
 </style>