图片轮巡

src/utils/api/index.js

@@ -36,6 +36,18 @@ export function getChannelByTermidJoggle(data) {
   });
 }
 
+
+//图片轮巡
+//获取图片轮巡接口
+export function getPictureList(data){
+  return request({
+    url: "/test/getPhotoBanner",
+    method: "post",
+    data
+  })
+}
+
+
 //拍照时间表设置
 //1.获取任务规则列表接口
 export function getScheduleRulelListJoggle(data) {

src/views/pictureRotation/index.vue

@@ -16,8 +16,8 @@
         <el-button type="primary" @click="toggleCountdown">{{
           isRuning ? "暂停轮巡" : "开始轮巡"
         }}</el-button>
-        <el-button type="primary">设置</el-button>
+        <el-button type="primary" @click="setbtn">设置</el-button>
-        <el-button type="primary">轮询条件</el-button>
+        <!-- <el-button type="primary">轮询条件</el-button>
         <el-select v-model="value" placeholder="请选择">
           <el-option
             v-for="item in options"
@@ -26,29 +26,102 @@
             :value="item.value"
           >
           </el-option>
-        </el-select>
+        </el-select> -->
         <span class="info">
           <b> {{ isRuning ? remainingTime : "已暂停" }} </b>
         </span>
       </div>
     </div>
-    <div class="imageCenter">
+    <div class="imageCenter" v-loading="loading">
       <div class="imgList" v-for="(item, index) in picList" :key="index">
         <img :src="item.path" />
         <p class="infoTop">
           {{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }}
         </p>
-        <p class="infoBottom">{{ item.photoTime }}</p>
+        <p class="infoBottom">{{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }} </p>
       </div>
     </div>
+    <el-dialog title="设置" :visible.sync="setdialog" width="30%" :close-on-click-modal="false">
+      <el-form label-width="100px" label-position="left" >
+        <el-form-item label="轮巡速度">
+          <el-select v-model="selSpeed" placeholder="请选择">
+            <el-option v-for="item in speedOptions" :key="item.value" :label="item.label" :value="item.value"></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>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="setdialog = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm()">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
-//import { picLoop } from "@/utils/api/index";
+import { getPictureList } from "@/utils/api/index";
 import qs from "qs";
 export default {
   data() {
     return {
+      setdialog:false,//设置弹框
+      speedOptions: [
+        {
+          value: 5,
+          label: "5秒",
+        },
+        {
+          value: 11,
+          label: "11秒",
+        },
+        {
+          value: 12,
+          label: "12秒",
+        },
+        {
+          value: 13,
+          label: "13秒",
+        },
+        {
+          value: 14,
+          label: "14秒",
+        },
+        {
+          value: 15,
+          label: "15秒",
+        },
+      ],//轮巡速度
+      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",
+        },
+      ],//画面布局
+      selLayout:1,
       options: [
         {
           value: "选项1",
@@ -60,24 +133,33 @@ export default {
         },
       ],
       value: "选项1",
-      page: 1, // 当前页数
+      page: 0, // 当前页数
       pageSize: 4, // 每页数量
       totalPage: 0, //总页数
       total: 0, //总条数
       picList: [], //图片列表数据
       basUrl: "",
-      totalTime: 15, //总共倒计时时间
+      remainingTime: 0, //剩余时间
-      remainingTime: 15, //剩余时间
       isRuning: false,
       timer: null,
+      loading:false
     };
   },
   methods: {
+    setbtn(){
+      this.isRuning = false;
+      this.pauseCountdown();
+      this.setdialog = true
+      this.selSpeed = parseInt(localStorage.getItem('totalTime')) ? parseInt(localStorage.getItem('totalTime')) : 15
+    },
+    submitForm(){
+      localStorage.setItem('totalTime', this.selSpeed)
+      this.setdialog = false;
+      this.$message.success("设置成功");
+    },
     handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
       this.isRuning = false;
       this.pauseCountdown();
       this.page = val;
@@ -85,151 +167,19 @@ export default {
     },
     //请求数据接口方法
     getPicData() {
-      this.picList = [
+      this.loading = true
-        {
+      getPictureList({
-          id: 15,
+        pageindex: this.page,
-          termId: 10010,
+        pagesize: this.pageSize
-          channelId: 1,
+      }).then((res) => {
-          presetId: 255,
+        this.picList = res.data.list
-          width: 0,
+        this.totalPage = res.data.totalpage
-          height: 0,
+        this.total = res.data.total
-          fileSize: 265357,
+        this.loading = false
-          photoTime: "2023-05-05T17:21:04.000+00:00",
+      })
-          recvTime: null,
+      .catch((err) => {
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012104.jpg",
+        console.log(err);
-          manualRequest: 0,
+      });
-        },
-        {
-          id: 16,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 263597,
-          photoTime: "2023-05-05T17:21:49.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012149.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 17,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 265471,
-          photoTime: "2023-05-05T17:25:13.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506012513.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 18,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 263625,
-          photoTime: "2023-05-05T17:36:37.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013617.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 19,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 261572,
-          photoTime: "2023-05-05T17:37:14.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013654.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 22,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 264348,
-          photoTime: "2023-05-05T17:40:06.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506013946.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 23,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 262231,
-          photoTime: "2023-05-05T17:42:33.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014213.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 24,
-          termId: 10010,
-          channelId: 1,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 262564,
-          photoTime: "2023-05-05T17:43:11.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_1_FF_20230506014252.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 26,
-          termId: 10010,
-          channelId: 2,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 177557,
-          photoTime: "2023-05-05T17:46:23.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014604.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 37,
-          termId: 10010,
-          channelId: 2,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 219467,
-          photoTime: "2023-05-05T17:47:31.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506014711.jpg",
-          manualRequest: 0,
-        },
-        {
-          id: 89,
-          termId: 10010,
-          channelId: 2,
-          presetId: 255,
-          width: 0,
-          height: 0,
-          fileSize: 257854,
-          photoTime: "2023-05-06T00:54:07.000+00:00",
-          recvTime: null,
-          path: "http://47.96.238.157/photos/2023/05/06/64/XYIGQ10C221000064_2_FF_20230506085401.jpg",
-          manualRequest: 0,
-        },
-      ];
     },
 
     //开始轮巡
@@ -238,17 +188,14 @@ export default {
         if (this.remainingTime <= 0) {
           //等于0时  清除定时器，剩余时间等于总时间，从新执行当前轮巡函数
           clearInterval(this.timer);
-          this.remainingTime = this.totalTime;
+          this.remainingTime = parseInt(localStorage.getItem('totalTime')) ?  parseInt(localStorage.getItem('totalTime')) : 15;
           this.startCountdown();
           this.page++;
           this.getPicData();
-          console.log(this.page);
+          if (this.page >= this.totalPage) {
-          if (this.page > this.totalPage) {
             clearInterval(this.timer);
-            //alert("最后一页了");
+            this.page = 0;
-            this.page = 1;
             this.startCountdown();
-            this.getPicData();
           }
         } else {
           this.remainingTime--;
@@ -273,12 +220,12 @@ export default {
   },
   computed: {},
   mounted() {
-    //this.toggleCountdown();
+    this.toggleCountdown();
   },
   created() {},
 
   beforeDestroy() {
-    console.log("销毁定时器");
+    // console.log("销毁定时器");
     clearInterval(this.timer);
     this.timer = null;
   },