优化预置位/自动扫描/巡航设置

web_src/src/components/common/ptzCruising.vue

@@ -1,38 +1,99 @@
 <template>
-  <div id="ptzPreset" style="width: 100%">
-    <el-tag v-for="item in presetList"
-            key="item.presetId"
-            closable
-            @close="delPreset(item)"
-            @click="gotoPreset(item)"
-            style="margin-right: 1rem; cursor: pointer"
-    >
-      {{item.presetName?item.presetName:item.presetId}}
-    </el-tag>
-    <el-input
-      min="1"
-      max="255"
-      placeholder="预置位编号"
-      addonBefore="预置位编号"
-      addonAfter="(1-255)"
-      style="width: 120px; vertical-align: bottom;"
-      v-if="inputVisible"
-      v-model="ptzPresetId"
-      ref="saveTagInput"
-      size="small"
-    >
-      <template v-slot:append>
-        <el-button  @click="addPreset()">保存</el-button>
-      </template>
-    </el-input>
-    <el-button v-else size="small" @click="showInput">+ 添加</el-button>
+  <div id="ptzCruising">
+    <div style="display: grid; grid-template-columns: 80px auto; line-height: 28px">
+      <span>巡航组号: </span>
+      <el-input
+        min="1"
+        max="255"
+        placeholder="巡航组号"
+        addonBefore="巡航组号"
+        addonAfter="(1-255)"
+        v-model="cruiseId"
+        size="mini"
+      >
+      </el-input>
+    </div>
+    <p>
+      <el-tag v-for="(item, index) in presetList"
+              key="item.presetId"
+              closable
+              @close="delPreset(item, index)"
+              style="margin-right: 1rem; cursor: pointer"
+      >
+        {{item.presetName?item.presetName:item.presetId}}
+      </el-tag>
+    </p>
+
+    <el-form size="mini" :inline="true" v-if="selectPresetVisible">
+      <el-form-item >
+        <el-select v-model="selectPreset" placeholder="请选择预置点">
+          <el-option
+            v-for="item in allPresetList"
+            :key="item.presetId"
+            :label="item.presetName"
+            :value="item">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="addCruisePoint">保存</el-button>
+        <el-button type="primary" @click="cancelAddCruisePoint">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button size="mini" v-else @click="selectPresetVisible=true">添加巡航点</el-button>
+
+    <el-form size="mini" :inline="true" v-if="setSpeedVisible">
+      <el-form-item >
+        <el-input
+          min="1"
+          max="4095"
+          placeholder="巡航速度"
+          addonBefore="巡航速度"
+          addonAfter="(1-4095)"
+          v-if="setSpeedVisible"
+          v-model="cruiseSpeed"
+          size="mini"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="setCruiseSpeed">保存</el-button>
+        <el-button @click="cancelSetCruiseSpeed">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button v-else size="mini" @click="setSpeedVisible = true">设置巡航速度</el-button>
+
+
+
+    <el-form size="mini" :inline="true" v-if="setTimeVisible">
+      <el-form-item >
+        <el-input
+          min="1"
+          max="4095"
+          placeholder="巡航停留时间(秒)"
+          addonBefore="巡航停留时间(秒)"
+          addonAfter="(1-4095)"
+          style="width: 100%;"
+          v-model="cruiseTime"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="setCruiseTime">保存</el-button>
+        <el-button @click="cancelSetCruiseTime">取消</el-button>
+      </el-form-item>
+    </el-form>
+    <el-button v-else size="mini" @click="setTimeVisible = true">设置巡航时间</el-button>
+    <el-button size="mini" @click="startCruise">开始巡航</el-button>
+    <el-button size="mini" @click="stopCruise">停止巡航</el-button>
+    <el-button size="mini" type="danger" @click="deleteCruise">删除巡航</el-button>
   </div>
 </template>
 
 <script>
 
 export default {
-  name: "ptzPreset",
+  name: "ptzCruising",
   props: [ 'channelDeviceId', 'deviceId'],
   components: {},
   created() {
@@ -40,23 +101,26 @@ export default {
   },
   data() {
     return {
+      cruiseId: 1,
       presetList: [],
+      allPresetList: [],
+      selectPreset: "",
       inputVisible: false,
-      ptzPresetId: '',
+      selectPresetVisible: false,
+      setSpeedVisible: false,
+      setTimeVisible: false,
+      cruiseSpeed: '',
+      cruiseTime: '',
     };
   },
   methods: {
     getPresetList: function () {
       this.$axios({
         method: 'get',
-        url: `/api/ptz/preset/query/${this.deviceId}/${this.channelDeviceId}`,
+        url: `/api/front-end/preset/query/${this.deviceId}/${this.channelDeviceId}`,
       }).then((res)=> {
         if (res.data.code === 0) {
-          this.presetList = res.data.data;
-          // 防止出现表格错位
-          this.$nextTick(() => {
-            this.$refs.channelListTable.doLayout();
-          })
+          this.allPresetList = res.data.data;
         }
 
       }).catch((error)=> {
@@ -64,13 +128,7 @@ export default {
         console.log(error);
       });
     },
-    showInput() {
-      this.inputVisible = true;
-      this.$nextTick(_ => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-    },
-    addPreset: function (){
+    addCruisePoint: function (){
       const loading = this.$loading({
         lock: true,
         fullscreen: true,
@@ -80,22 +138,15 @@ export default {
       })
       this.$axios({
         method: 'get',
-        url: `/api/ptz/preset/add/${this.deviceId}/${this.channelDeviceId}`,
+        url: `/api/front-end/cruise/point/add/${this.deviceId}/${this.channelDeviceId}`,
         params: {
-          presetId: this.ptzPresetId
+          cruiseId: this.cruiseId,
+          presetId: this.selectPreset.presetId
         }
       }).then((res)=> {
         if (res.data.code === 0) {
-          setTimeout(()=>{
-            loading.close()
-            this.inputVisible = false;
-            this.ptzPresetId = ""
-            this.getPresetList()
-          }, 1000)
+          this.presetList.push(this.selectPreset)
         }else {
-          loading.close()
-          this.inputVisible = false;
-          this.ptzPresetId = ""
           this.$message({
             showClose: true,
             message: res.data.msg,
@@ -103,29 +154,118 @@ export default {
           });
         }
       }).catch((error)=> {
-        loading.close()
-        this.inputVisible = false;
-        this.ptzPresetId = ""
         this.$message({
           showClose: true,
           message: error,
           type: 'error'
         });
-      });
+      }).finally(()=>{
+        this.selectPreset = ""
+        this.selectPresetVisible = false;
+        loading.close()
+      })
     },
-    gotoPreset: function (preset){
-      console.log(preset)
+    cancelAddCruisePoint: function () {
+      this.selectPreset = ""
+      this.selectPresetVisible = false;
+    },
+    delPreset: function (preset, index){
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
       this.$axios({
         method: 'get',
-        url: `/api/ptz/preset/call/${this.deviceId}/${this.channelDeviceId}`,
+        url: `/api/front-end/cruise/point/delete/${this.deviceId}/${this.channelDeviceId}`,
         params: {
+          cruiseId: this.cruiseId,
           presetId: preset.presetId
         }
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.presetList.splice(index, 1)
+        }else {
+          this.$message({
+            showClose: true,
+            message: res.data.msg,
+            type: 'error'
+          });
+        }
+      }).catch((error)=> {
+        this.$message({
+          showClose: true,
+          message: error,
+          type: 'error'
+        });
+      }).finally(()=>{
+        loading.close()
+      })
+    },
+    deleteCruise: function (preset, index){
+      this.$confirm("确定删除此巡航组", '提示', {
+        dangerouslyUseHTMLString: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const loading = this.$loading({
+          lock: true,
+          fullscreen: true,
+          text: '正在发送指令',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        this.$axios({
+          method: 'get',
+          url: `/api/front-end/cruise/point/delete/${this.deviceId}/${this.channelDeviceId}`,
+          params: {
+            cruiseId: this.cruiseId,
+            presetId: 0
+          }
+        }).then((res)=> {
+          if (res.data.code === 0) {
+            this.presetList.splice(index, 1)
+          }else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: 'error'
+            });
+          }
+        }).catch((error)=> {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          });
+        }).finally(()=>{
+          loading.close()
+        })
+      })
+    },
+    setCruiseSpeed: function (){
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$axios({
+        method: 'get',
+        url: `/api/front-end/cruise/speed/${this.deviceId}/${this.channelDeviceId}`,
+        params: {
+          cruiseId: this.cruiseId,
+          speed: this.cruiseSpeed
+        }
       }).then((res)=> {
         if (res.data.code === 0) {
           this.$message({
             showClose: true,
-            message: '调用成功',
+            message: "保存成功",
             type: 'success'
           });
         }else {
@@ -141,57 +281,137 @@ export default {
           message: error,
           type: 'error'
         });
-      });
+      }).finally(()=>{
+        this.cruiseSpeed = ""
+        this.setSpeedVisible = false
+        loading.close()
+      })
     },
-    delPreset: function (preset){
-      this.$confirm("确定删除此预置位", '提示', {
-        dangerouslyUseHTMLString: true,
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        const loading = this.$loading({
-          lock: true,
-          fullscreen: true,
-          text: '正在发送指令',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        })
-        this.$axios({
-          method: 'get',
-          url: `/api/ptz/preset/delete/${this.deviceId}/${this.channelDeviceId}`,
-          params: {
-            presetId: preset.presetId
-          }
-        }).then((res)=> {
-          if (res.data.code === 0) {
-            setTimeout(()=>{
-              loading.close()
-              this.getPresetList()
-            }, 1000)
-          }else {
-            loading.close()
-            this.$message({
-              showClose: true,
-              message: res.data.msg,
-              type: 'error'
-            });
-          }
-
-        }).catch((error)=> {
-          loading.close()
+    cancelSetCruiseSpeed: function (){
+      this.cruiseSpeed = ""
+      this.setSpeedVisible = false
+    },
+    setCruiseTime: function (){
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$axios({
+        method: 'get',
+        url: `/api/front-end/cruise/time/${this.deviceId}/${this.channelDeviceId}`,
+        params: {
+          cruiseId: this.cruiseId,
+          time: this.cruiseTime
+        }
+      }).then((res)=> {
+        if (res.data.code === 0) {
           this.$message({
             showClose: true,
-            message: error,
+            message: "保存成功",
+            type: 'success'
+          });
+        }else {
+          this.$message({
+            showClose: true,
+            message: res.data.msg,
             type: 'error'
           });
+        }
+      }).catch((error)=> {
+        this.$message({
+          showClose: true,
+          message: error,
+          type: 'error'
         });
-      }).catch(() => {
-
-      });
-
+      }).finally(()=>{
+        this.setTimeVisible = false;
+        this.cruiseTime = "";
+        loading.close()
+      })
+    },
+    cancelSetCruiseTime: function (){
+      this.setTimeVisible = false;
+      this.cruiseTime = "";
+    },
+    startCruise: function (){
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$axios({
+        method: 'get',
+        url: `/api/front-end/cruise/start/${this.deviceId}/${this.channelDeviceId}`,
+        params: {
+          cruiseId: this.cruiseId
+        }
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.$message({
+            showClose: true,
+            message: "发送成功",
+            type: 'success'
+          });
+        }else {
+          this.$message({
+            showClose: true,
+            message: res.data.msg,
+            type: 'error'
+          });
+        }
+      }).catch((error)=> {
+        this.$message({
+          showClose: true,
+          message: error,
+          type: 'error'
+        });
+      }).finally(()=>{
+        loading.close()
+      })
+    },
+    stopCruise: function (){
+      const loading = this.$loading({
+        lock: true,
+        fullscreen: true,
+        text: '正在发送指令',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$axios({
+        method: 'get',
+        url: `/api/front-end/cruise/stop/${this.deviceId}/${this.channelDeviceId}`,
+        params: {
+          cruiseId: this.cruiseId
+        }
+      }).then((res)=> {
+        if (res.data.code === 0) {
+          this.$message({
+            showClose: true,
+            message: "发送成功",
+            type: 'success'
+          });
+        }else {
+          this.$message({
+            showClose: true,
+            message: res.data.msg,
+            type: 'error'
+          });
+        }
+      }).catch((error)=> {
+        this.$message({
+          showClose: true,
+          message: error,
+          type: 'error'
+        });
+      }).finally(()=>{
+        loading.close()
+      })
     },
-
   },
 };
 </script>