图片轮询添加布局

src/views/pictureRotation/index.vue

@@ -22,7 +22,18 @@
       </div>
     </div>
     <div class="imageCenter" v-loading="loading" v-cloak>
-      <div class="imgList" v-for="(item, index) in picList" :key="index">
+      <el-row
+        v-for="i in rowNum"
+        :key="'row-' + i"
+        :style="{ height: 100 / rowNum + '%' }"
+      >
+        <el-col
+          :span="24 / colNum"
+          v-for="(item, index) in picList"
+          v-if="index < colNum * i && index >= colNum * (i - 1)"
+          :key="'col-' + index"
+        >
+          <div class="imgList">
             <viewer
               :options="OptionssalseImg"
               v-if="item.path !== null && item.path.indexOf('videos') == -1"
@@ -35,7 +46,9 @@
             </viewer>
             <div
               class="bigpic"
-          v-else-if="item.path !== null && item.path.indexOf('videos') !== -1"
+              v-else-if="
+                item.path !== null && item.path.indexOf('videos') !== -1
+              "
             >
               <video
                 width="100%"
@@ -62,14 +75,17 @@
               {{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }} 
             </p>
           </div>
+        </el-col>
+      </el-row>
     </div>
     <el-dialog
       title="设置"
       :visible.sync="setdialog"
-      width="30%"
+      width="480px"
       :close-on-click-modal="false"
+      class="setPicShow"
     >
-      <el-form label-width="100px" label-position="left">
+      <el-form label-position="left">
         <el-form-item label="轮巡速度">
           <el-select v-model="selSpeed" placeholder="请选择">
             <el-option
@@ -80,11 +96,40 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="画面布局">
+        <el-form-item label="画面布局" class="layoutBox">
-          <el-select v-model="selLayout" placeholder="s请选择">
+          <!-- <el-select v-model="selLayout" placeholder="s请选择">
-            <el-option v-for="item in layoutOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            <el-option
-          </el-select>
+              v-for="item in layoutOptions"
-        </el-form-item> -->
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select> -->
+          <div class="selectGroup">
+            <div class="rowbox">
+              <el-radio-group v-model="rowradio" class="radio1">
+                <el-radio-button label="1"></el-radio-button>
+                <el-radio-button label="2"></el-radio-button>
+                <el-radio-button label="3"></el-radio-button>
+                <el-radio-button label="4"></el-radio-button>
+                <!-- <el-radio-button label="5"></el-radio-button>
+                <el-radio-button label="6"></el-radio-button> -->
+              </el-radio-group>
+              <span class="labelinfo">行</span>
+            </div>
+            <div class="colbox">
+              <el-radio-group v-model="colradio" class="radio2">
+                <el-radio-button label="1"></el-radio-button>
+                <el-radio-button label="2"></el-radio-button>
+                <el-radio-button label="3"></el-radio-button>
+                <el-radio-button label="4"></el-radio-button>
+                <!-- <el-radio-button label="5"></el-radio-button>
+                <el-radio-button label="6"></el-radio-button> -->
+              </el-radio-group>
+              <span class="labelinfo">列</span>
+            </div>
+          </div>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="setdialog = false">取 消</el-button>
@@ -147,32 +192,11 @@ export default {
         },
       ], //轮巡速度
       selSpeed: 5,
-      layoutOptions: [
+      //画面布局
-        {
+      rowNum: "",
-          value: 1,
+      colNum: "",
-          label: "2*2",
+      rowradio: "2",
-        },
+      colradio: "2",
-        {
-          value: 2,
-          label: "3*3",
-        },
-        {
-          value: 3,
-          label: "2*3",
-        },
-        {
-          value: 4,
-          label: "3*2",
-        },
-        {
-          value: 5,
-          label: "4*2",
-        },
-        {
-          value: 6,
-          label: "4*3",
-        },
-      ], //画面布局
       selLayout: 1,
       options: [
         {
@@ -194,11 +218,32 @@ export default {
       this.selSpeed = parseInt(localStorage.getItem("totalTime"))
         ? parseInt(localStorage.getItem("totalTime"))
         : 15;
+      this.rowNum = parseInt(localStorage.getItem("row"))
+        ? parseInt(localStorage.getItem("row"))
+        : 2;
+      this.colNum = parseInt(localStorage.getItem("col"))
+        ? parseInt(localStorage.getItem("col"))
+        : 2;
+      this.rowradio = parseInt(localStorage.getItem("row"))
+        ? parseInt(localStorage.getItem("row"))
+        : 2;
+      this.colradio = parseInt(localStorage.getItem("col"))
+        ? parseInt(localStorage.getItem("col"))
+        : 2;
     },
     submitForm() {
       localStorage.setItem("totalTime", this.selSpeed);
+      localStorage.setItem("row", this.rowradio);
+      localStorage.setItem("col", this.colradio);
+      this.rowNum = parseInt(localStorage.getItem("row"))
+        ? parseInt(localStorage.getItem("row"))
+        : 2;
+      this.colNum = parseInt(localStorage.getItem("col"))
+        ? parseInt(localStorage.getItem("col"))
+        : 2;
       this.setdialog = false;
       this.$message.success("设置成功");
+      this.getPicData();
     },
     //点击分页
     handleCurrentChange(val) {
@@ -212,7 +257,7 @@ export default {
       this.loading = true;
       getPictureList({
         pageindex: this.page,
-        pagesize: this.pageSize,
+        pagesize: this.rowNum * this.colNum,
       })
         .then((res) => {
           this.picList = res.data.list;
@@ -273,6 +318,13 @@ export default {
     this.remainingTime = parseInt(localStorage.getItem("totalTime"))
       ? parseInt(localStorage.getItem("totalTime"))
       : 15;
+    this.rowradio = this.rowNum = parseInt(localStorage.getItem("row"))
+      ? parseInt(localStorage.getItem("row"))
+      : 2;
+    this.colradio = this.colNum = parseInt(localStorage.getItem("col"))
+      ? parseInt(localStorage.getItem("col"))
+      : 2;
+
     this.toggleCountdown();
   },
   created() {},
@@ -317,24 +369,23 @@ export default {
   }
 
   .imageCenter {
-    display: flex;
+    // display: flex;
-    // justify-content: space-around;
+    // flex-wrap: wrap;
-    flex-wrap: wrap;
     height: calc(100% - 52px);
-    justify-content: space-between;
+    .el-col {
+      height: 100%;
+      padding-right: 0.1%;
+      padding-left: 0.1%;
+      padding-top: 0.1%;
+      padding-bottom: 0.1%;
+    }
+    // justify-content: space-between;
     .imgList {
-      width: 49.8%;
+      border: 1px solid #eee;
-      position: relative;
+      width: 100%;
-      display: inline-block;
-      margin-right: 0.1%;
-      margin-left: 0.1%;
-      margin-top: 0.1%;
-      margin-bottom: 0.1%;
       position: relative;
-      -moz-border-radius: 3px;
+      //background-color: #00eaff;
-      -webkit-border-radius: 3px;
+      height: 100%;
-      border-radius: 3px px;
-      height: 49.8%;
       .bigpic {
         width: 100%;
         height: 100%;
@@ -371,6 +422,33 @@ export default {
       }
     }
   }
+  .setPicShow {
+    .el-select {
+      width: 222px;
+    }
+    .layoutBox {
+      display: flex;
+      align-items: center;
+    }
+    .selectGroup {
+      display: flex;
+      flex-direction: column;
+      .el-radio-button--small .el-radio-button__inner {
+        padding: 9px 24px;
+      }
+      .rowbox {
+        margin-bottom: 8px;
+        .labelinfo {
+          margin-left: 8px;
+        }
+      }
+      .colbox {
+        .labelinfo {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
 }
 [v-cloak] {
   display: none;

src/views/realTimeMonitor/components/infoDialog.vue

@@ -130,5 +130,6 @@ export default {
 </script>
 <style lang="less">
 .infoDialog {
+  background: #fff;
 }
 </style>