From c2f5f02288aae6632d8a413899723e48427f7d41 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Sat, 6 May 2023 16:44:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=A1=A8=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Sidebar.vue             |  10 +-
 .../components/adddeviceDialog.vue            | 118 +++++++++++++-----
 src/views/devicePhotoSchedule/index.vue       |   4 +-
 src/views/pictureRotation/index.vue           |  85 ++++++++-----
 src/views/realTimeSearch/index.vue            |   2 +-
 5 files changed, 151 insertions(+), 68 deletions(-)

diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index edce965..acee002 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -54,11 +54,11 @@ export default {
     return {
       activeIndex: "/realTimeMonitor",
       items: [
-        {
-          icon: "el-icon-s-home",
-          index: "stritl",
-          title: "首页",
-        },
+        // {
+        //   icon: "el-icon-s-home",
+        //   index: "stritl",
+        //   title: "首页",
+        // },
         {
           icon: "el-icon-camera",
           index: "realTimeMonitor",
diff --git a/src/views/devicePhotoSchedule/components/adddeviceDialog.vue b/src/views/devicePhotoSchedule/components/adddeviceDialog.vue
index a29829e..cfee213 100644
--- a/src/views/devicePhotoSchedule/components/adddeviceDialog.vue
+++ b/src/views/devicePhotoSchedule/components/adddeviceDialog.vue
@@ -10,34 +10,53 @@
       label-position="left"
       ref="formInfo"
       label-width="auto"
-      :rules="rules"
-      :model="formdata"
+      :model="ruleForm"
     >
       <el-form-item label="名称" prop="name">
-        <el-input v-model="formdata.name" autocomplete="off"></el-input>
+        <el-input v-model="ruleForm.name" autocomplete="off"></el-input>
       </el-form-item>
-      <div class="timeBoxArr">
-        <el-form-item label="时间" prop="time">
-          <el-time-picker
-            is-range
-            v-model="formdata.time"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            value-format="HH:mm:ss"
+      <div class="addtimeBox" ref="timescrollref">
+        <div
+          class="timeBoxArr"
+          v-for="(item, index) in ruleForm.formList"
+          :key="index"
+        >
+          <el-form-item label="时间" :prop="'formList.' + index + '.time'">
+            <el-time-picker
+              is-range
+              v-model="item.time"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="HH:mm:ss"
+            >
+            </el-time-picker>
+          </el-form-item>
+          <el-form-item
+            label="间隔（分）"
+            :prop="'formList.' + index + '.span'"
           >
-          </el-time-picker>
-        </el-form-item>
-        <el-form-item label="间隔（分）" prop="span">
-          <!-- <el-input v-model="formdata.span" autocomplete="off" type="number"></el-input> -->
-          <el-input-number v-model="formdata.span" :min="1"></el-input-number>
-        </el-form-item>
-        <button>新增</button>
-        <button>删除</button>
+            <!-- <el-input v-model="formdata.span" autocomplete="off" type="number"></el-input> -->
+            <el-input-number v-model="item.span" :min="1"></el-input-number>
+          </el-form-item>
+          <div class="btngrop">
+            <el-button
+              v-if="index !== 0"
+              type="danger"
+              icon="el-icon-minus"
+              @click="deleteModule(item, index)"
+            ></el-button>
+            <el-button
+              icon="el-icon-plus"
+              type="primary"
+              @click="addModule()"
+              v-if="index + 1 == ruleForm.formList.length"
+            ></el-button>
+          </div>
+        </div>
       </div>
-
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="formdata.remark" autocomplete="off"></el-input>
+        <el-input v-model="ruleForm.remark" autocomplete="off"></el-input>
       </el-form-item>
     </el-form>
     <div slot="footer" class="dialog-footer">
@@ -55,19 +74,45 @@ export default {
   data() {
     return {
       isShow: false,
-      formdata: {},
+      ruleForm: {
+        name: "",
+        formList: [
+          {
+            time: "",
+            span: "",
+          },
+        ],
+        remark: "",
+      },
     };
   },
   methods: {
-    //判断
-    getdataform(val) {
-      console.log(val);
-      if (val == null) {
-        return (this.formdata = {});
+    addModule() {
+      //新增一行
+      this.ruleForm.formList.push({
+        time: "",
+        span: "",
+      });
+      console.log(this.$refs.timescrollref);
+      this.$nextTick(() => {
+        console.log(this.$refs.timescrollref);
+        if (this.$refs.timescrollref) {
+          console.log(this.$refs.timescrollref.scrollHeight);
+          this.$refs.timescrollref.scrollTop =
+            this.$refs.timescrollref.scrollHeight;
+        }
+      });
+    },
+    deleteModule(item, index) {
+      console.log(item, index);
+      const itemList = this.ruleForm.formList.indexOf(item);
+      if (itemList !== -1) {
+        this.ruleForm.formList.splice(index, 1);
       }
-      this.formdata = val;
-      this.$set(this.formdata, "time", [val.startTime, val.endTime]);
     },
+
+    //判断
+
     // 保存确定操作
     submitForm() {
       this.$refs.formInfo.validate((valid) => {
@@ -92,6 +137,10 @@ export default {
 <style lang="less">
 .adddeviceDialog {
   .el-form {
+    .addtimeBox {
+      max-height: 205px;
+      overflow: auto;
+    }
     .timeBoxArr {
       display: flex;
       .el-date-editor.el-input,
@@ -99,6 +148,15 @@ export default {
         width: 226px;
         margin-right: 16px;
       }
+
+      .btngrop {
+        margin-bottom: 16px;
+        margin-left: 16px;
+        height: 32px;
+        .el-button--small {
+          padding: 9px 8px;
+        }
+      }
     }
   }
 }
diff --git a/src/views/devicePhotoSchedule/index.vue b/src/views/devicePhotoSchedule/index.vue
index f294df4..2941146 100644
--- a/src/views/devicePhotoSchedule/index.vue
+++ b/src/views/devicePhotoSchedule/index.vue
@@ -141,14 +141,14 @@ export default {
     handleAdddevice() {
       this.title = "新增";
       this.$refs.adddeviceDialogref.display();
-      this.$refs.adddeviceDialogref.getdataform(null);
+      //this.$refs.adddeviceDialogref.getdataform(null);
     },
 
     //修改
     handleResive(data) {
       this.title = "修改";
       this.$refs.adddeviceDialogref.display();
-      this.$refs.adddeviceDialogref.getdataform(data);
+      //this.$refs.adddeviceDialogref.getdataform(data);
     },
 
     //设置
diff --git a/src/views/pictureRotation/index.vue b/src/views/pictureRotation/index.vue
index af63311..42f669e 100644
--- a/src/views/pictureRotation/index.vue
+++ b/src/views/pictureRotation/index.vue
@@ -34,18 +34,36 @@
     </div>
     <div class="imageCenter" v-loading="loading">
       <div class="imgList" v-for="(item, index) in picList" :key="index">
-        <img :src="item.path" />
+        <viewer class="bigpic" v-if="!item.path.includes('mp4')">
+          <img :src="item.path" />
+        </viewer>
+        <video width="100%" height="90%" controls autoplay v-else>
+          <source :src="item.path" type="video/mp4" />
+        </video>
+
         <p class="infoTop">
           {{ item.channelId }}-{{ item.termId }}-{{ item.fileSize }}
         </p>
-        <p class="infoBottom">{{ $moment(item.photoTime).format("yy-MM-DD HH:mm:ss") }} </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-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-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="画面布局">
@@ -67,7 +85,7 @@ import qs from "qs";
 export default {
   data() {
     return {
-      setdialog:false,//设置弹框
+      setdialog: false, //设置弹框
       speedOptions: [
         {
           value: 5,
@@ -93,8 +111,8 @@ export default {
           value: 15,
           label: "15秒",
         },
-      ],//轮巡速度
-      selSpeed:5,
+      ], //轮巡速度
+      selSpeed: 5,
       layoutOptions: [
         {
           value: 1,
@@ -120,8 +138,8 @@ export default {
           value: 6,
           label: "4*3",
         },
-      ],//画面布局
-      selLayout:1,
+      ], //画面布局
+      selLayout: 1,
       options: [
         {
           value: "选项1",
@@ -142,23 +160,24 @@ export default {
       remainingTime: 0, //剩余时间
       isRuning: false,
       timer: null,
-      loading:false
+      loading: false,
     };
   },
   methods: {
-    setbtn(){
+    setbtn() {
       this.isRuning = false;
       this.pauseCountdown();
-      this.setdialog = true
-      this.selSpeed = parseInt(localStorage.getItem('totalTime')) ? parseInt(localStorage.getItem('totalTime')) : 15
+      this.setdialog = true;
+      this.selSpeed = parseInt(localStorage.getItem("totalTime"))
+        ? parseInt(localStorage.getItem("totalTime"))
+        : 15;
     },
-    submitForm(){
-      localStorage.setItem('totalTime', this.selSpeed)
+    submitForm() {
+      localStorage.setItem("totalTime", this.selSpeed);
       this.setdialog = false;
       this.$message.success("设置成功");
     },
-    handleSizeChange(val) {
-    },
+    handleSizeChange(val) {},
     handleCurrentChange(val) {
       this.isRuning = false;
       this.pauseCountdown();
@@ -167,19 +186,20 @@ export default {
     },
     //请求数据接口方法
     getPicData() {
-      this.loading = true
+      this.loading = true;
       getPictureList({
         pageindex: this.page,
-        pagesize: this.pageSize
-      }).then((res) => {
-        this.picList = res.data.list
-        this.totalPage = res.data.totalpage
-        this.total = res.data.total
-        this.loading = false
+        pagesize: this.pageSize,
       })
-      .catch((err) => {
-        console.log(err);
-      });
+        .then((res) => {
+          this.picList = res.data.list;
+          this.totalPage = res.data.totalpage;
+          this.total = res.data.total;
+          this.loading = false;
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
 
     //开始轮巡
@@ -188,7 +208,9 @@ export default {
         if (this.remainingTime <= 0) {
           //等于0时  清除定时器，剩余时间等于总时间，从新执行当前轮巡函数
           clearInterval(this.timer);
-          this.remainingTime = parseInt(localStorage.getItem('totalTime')) ?  parseInt(localStorage.getItem('totalTime')) : 15;
+          this.remainingTime = parseInt(localStorage.getItem("totalTime"))
+            ? parseInt(localStorage.getItem("totalTime"))
+            : 15;
           this.startCountdown();
           this.page++;
           this.getPicData();
@@ -280,7 +302,10 @@ export default {
       -webkit-border-radius: 3px;
       border-radius: 3px px;
       height: 49%;
-
+      .bigpic {
+        width: 100%;
+        height: 100%;
+      }
       img {
         width: 100%;
         height: 100%;
diff --git a/src/views/realTimeSearch/index.vue b/src/views/realTimeSearch/index.vue
index e4f6b71..b1502e3 100644
--- a/src/views/realTimeSearch/index.vue
+++ b/src/views/realTimeSearch/index.vue
@@ -210,7 +210,7 @@ export default {
     height: calc(100% - 52px);
     overflow: auto;
     .imgList {
-      width: 23.5%;
+      width: calc((100% - 96px) / 4);
       position: relative;
       display: inline-block;
       margin: 8px;