图片轮询添加布局

src/views/pictureRotation/index.vue

@@ -22,54 +22,70 @@
       </div>
     </div>
     <div class="imageCenter" v-loading="loading" v-cloak>
-      <div class="imgList" v-for="(item, index) in picList" :key="index">
-        <viewer
-          :options="OptionssalseImg"
-          v-if="item.path !== null && item.path.indexOf('videos') == -1"
-          class="bigpic"
-          :style="
-            item.path ? 'backgroundImage:url(' + item.path + '!128x72)' : ''
-          "
+      <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"
         >
-          <img :src="item.path + '!1280x720'" />
-        </viewer>
-        <div
-          class="bigpic"
-          v-else-if="item.path !== null && item.path.indexOf('videos') !== -1"
-        >
-          <video
-            width="100%"
-            height="100%"
-            :src="item.path"
-            controls="controls"
-          ></video>
-        </div>
-        <div class="bigpic" v-else>
-          <img src="../../assets/img/nopic.jpg" />
-        </div>
-        <p class="infoTop">
-          {{ item.linename }}-{{
-            item.displayname !== null && item.displayname !== ""
-              ? item.displayname
-              : item.cmdid
-          }}-{{
-            item.alias !== null && item.alias !== ""
-              ? item.alias
-              : item.channnelname
-          }}
-        </p>
-        <p class="infoBottom" v-if="item.photoTime !== null">
-          {{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }} 
-        </p>
-      </div>
+          <div class="imgList">
+            <viewer
+              :options="OptionssalseImg"
+              v-if="item.path !== null && item.path.indexOf('videos') == -1"
+              class="bigpic"
+              :style="
+                item.path ? 'backgroundImage:url(' + item.path + '!128x72)' : ''
+              "
+            >
+              <img :src="item.path + '!1280x720'" />
+            </viewer>
+            <div
+              class="bigpic"
+              v-else-if="
+                item.path !== null && item.path.indexOf('videos') !== -1
+              "
+            >
+              <video
+                width="100%"
+                height="100%"
+                :src="item.path"
+                controls="controls"
+              ></video>
+            </div>
+            <div class="bigpic" v-else>
+              <img src="../../assets/img/nopic.jpg" />
+            </div>
+            <p class="infoTop">
+              {{ item.linename }}-{{
+                item.displayname !== null && item.displayname !== ""
+                  ? item.displayname
+                  : item.cmdid
+              }}-{{
+                item.alias !== null && item.alias !== ""
+                  ? item.alias
+                  : item.channnelname
+              }}
+            </p>
+            <p class="infoBottom" v-if="item.photoTime !== null">
+              {{ $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-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-select>
-        </el-form-item> -->
+        <el-form-item label="画面布局" class="layoutBox">
+          <!-- <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-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: [
-        {
-          value: 1,
-          label: "2*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",
-        },
-      ], //画面布局
+      //画面布局
+      rowNum: "",
+      colNum: "",
+      rowradio: "2",
+      colradio: "2",
       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;
-    // justify-content: space-around;
-    flex-wrap: wrap;
+    // display: flex;
+    // 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%;
-      position: relative;
-      display: inline-block;
-      margin-right: 0.1%;
-      margin-left: 0.1%;
-      margin-top: 0.1%;
-      margin-bottom: 0.1%;
+      border: 1px solid #eee;
+      width: 100%;
       position: relative;
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px px;
-      height: 49.8%;
+      //background-color: #00eaff;
+      height: 100%;
       .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>