合并分支 'fxf1' 到 'plus1.1.0'

src/views/dataCenter/map/model/indicatorWarning/index.vue

@@ -14,41 +14,49 @@
         </div>
       </div>
       <div class="contentBox">
-        <div class="table-list">
-          <el-row
-            class="table_cell"
-            v-for="(item, index) in tableData"
-            :key="index"
-            :dataIndex="index"
-          >
-            <el-col :span="6">
-              <div class="num">
-                <div>{{ item.num }}</div>
-              </div>
-            </el-col>
-            <el-col :span="6">
-              <div class="grade-box">
-                <img
-                  v-if="item.grade == 1"
-                  src="../../../../../assets/img/grade1.png"
-                  class="grade-icon"
-                />
-                <img
-                  v-else
-                  src="../../../../../assets/img/grade2.png"
-                  class="grade-icon"
-                />
-                <div
-                  class="name"
-                  :style="{ color: gradeType[item.grade].color }"
-                >
-                  {{ gradeType[item.grade].name }}
+        <el-carousel
+          height="200px"
+          trigger="click"
+          :loop="true"
+          :interval="2500"
+          direction="vertical"
+          :autoplay="true"
+        >
+          <el-carousel-item v-for="(data, idx) in carouselData" :key="idx">
+            <el-row
+              class="table-list"
+              v-for="(item, index) in data"
+              :key="index"
+            >
+              <el-col :span="6">
+                <div class="num">
+                  <div>{{ item.num }}</div>
                 </div>
-              </div>
-            </el-col>
-            <el-col :span="12">{{ item.event }}</el-col>
-          </el-row>
-        </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="grade-box">
+                  <img
+                    v-if="item.grade == 1"
+                    src="../../../../../assets/img/grade1.png"
+                    class="grade-icon"
+                  />
+                  <img
+                    v-else
+                    src="../../../../../assets/img/grade2.png"
+                    class="grade-icon"
+                  />
+                  <div
+                    class="name"
+                    :style="{ color: gradeType[item.grade].color }"
+                  >
+                    {{ gradeType[item.grade].name }}
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="12">{{ item.event }}</el-col>
+            </el-row>
+          </el-carousel-item>
+        </el-carousel>
       </div>
     </div>
   </div>
@@ -72,6 +80,15 @@ export default {
     tableData() {
       return Mock[this.curDataType];
     },
+    carouselData() {
+      let carouselData = [];
+      for (let i = 0; i < this.tableData.length; i += 5) {
+        const list = this.tableData.slice(i, i + 5);
+        carouselData.push(list);
+      }
+      console.log(carouselData);
+      return carouselData;
+    },
   },
   data() {
     return {
@@ -115,7 +132,7 @@ export default {
   height: 40px;
   font-weight: bold;
   font-size: 14px;
-  background-color: #0e4781 !important;
+  background-color: #3395ff30 !important;
 
   .tableBox {
     color: #ffffff;
@@ -130,52 +147,40 @@ export default {
       padding: 8px 0;
       line-height: 23px;
     }
-
-    .el-row {
-      border-bottom: 1px dashed #10529a;
-    }
   }
 }
 .contentBox {
   color: #fff;
   font-size: 16px;
-  //   height: 200px;
-
-  .table-list {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    .el-row {
-      padding: 0 20px;
-      //   border-bottom: 1px dashed #10529a;
-      display: flex;
-      align-items: center;
-    }
-    .el-row:nth-child(even) {
-      background-color: #3395ff30;
-    }
-    .el-col {
-      color: #d4f7ff;
-      font-size: 12px;
-      padding: 8px 0;
-      line-height: 18px;
+  .el-row {
+    padding: 0 24px 0 20px;
+    display: flex;
+    align-items: center;
+  }
+  .el-row:nth-child(even) {
+    background-color: #3395ff13;
+  }
+  .el-col {
+    color: #d4f7ff;
+    font-size: 12px;
+    padding: 8px 0;
+    line-height: 18px;
+  }
+  .num {
+    font-family: "YouSheBiaoTiHei";
+    color: #ffffff;
+    font-size: 17px;
+  }
+  .grade-box {
+    display: flex;
+    align-items: center;
+    .grade-icon {
+      width: 15px;
     }
-    .num {
+    .name {
+      margin-left: 10px;
       font-family: "YouSheBiaoTiHei";
-      color: #ffffff;
-      font-size: 17px;
-    }
-    .grade-box {
-      display: flex;
-      align-items: center;
-      .grade-icon {
-        width: 15px;
-      }
-      .name {
-        margin-left: 10px;
-        font-family: "YouSheBiaoTiHei";
-        font-size: 16px;
-      }
+      font-size: 16px;
     }
   }
 }

src/views/dataCenter/map/model/indicatorWarning/mock.js

@@ -15,6 +15,12 @@ export default {
     {
       num: 16, grade: 2, event: "军民需求对接活动偏少",
     },
+    {
+      num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
+    },
+    {
+      num: 24, grade: 1, event: "部分县市区任务落实不力",
+    },
 
   ],
   "2022One": [
@@ -33,6 +39,12 @@ export default {
     {
       num: 16, grade: 2, event: "军民需求对接活动偏少",
     },
+    {
+      num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
+    },
+    {
+      num: 24, grade: 1, event: "部分县市区任务落实不力",
+    },
   ],
   "typeFour": [
     {
@@ -50,6 +62,12 @@ export default {
     {
       num: 16, grade: 2, event: "军民需求对接活动偏少",
     },
+    {
+      num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
+    },
+    {
+      num: 24, grade: 1, event: "部分县市区任务落实不力",
+    },
   ],
   "typeThree": [
     {
@@ -67,6 +85,12 @@ export default {
     {
       num: 16, grade: 2, event: "军民需求对接活动偏少",
     },
+    {
+      num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
+    },
+    {
+      num: 24, grade: 1, event: "部分县市区任务落实不力",
+    },
   ],
   "typeTwo": [
     {
@@ -84,6 +108,12 @@ export default {
     {
       num: 16, grade: 2, event: "军民需求对接活动偏少",
     },
+    {
+      num: 17, grade: 1, event: "部分县市区未严格落实组织管理体系建设要求",
+    },
+    {
+      num: 24, grade: 1, event: "部分县市区任务落实不力",
+    },
   ],