feat：新增删除巡河任务

src/api/securityPatrolApi.js

@@ -30,4 +30,12 @@ export function endPatrol(data){
     method: 'post',
     data
   })
+}
+
+// 删除巡河任务
+export function deleteSecurityPatrol(id){
+    return request({
+    url: '/api/sddnWeiHe/securityPatrol/del/' + id,
+    method: 'DELETE'
+  })
 }

src/views/safety-inspection/right.vue

@@ -1,85 +1,95 @@
 <template>
   <div>
-  <base-panel-right>
-    <div class="safety-inspection-right-container">
-      <base-header title="一键巡河"></base-header>
-      <div class="card-item">
-        <div class="tools-panel">
-          <div class="btn add-btn" @click="addTask"><i class="el-icon-plus"></i>&nbsp;新建任务</div>
-          <div class="input-bg">
-            <el-input v-model="securityPatrolName" size="mini" placeholder="搜索任务名称" suffix-icon="el-icon-search" @change="searchByName"></el-input>
+    <base-panel-right>
+      <div class="safety-inspection-right-container">
+        <base-header title="一键巡河"></base-header>
+        <div class="card-item">
+          <div class="tools-panel">
+            <div class="btn add-btn" @click="addTask"><i class="el-icon-plus"></i>&nbsp;新建任务</div>
+            <div class="input-bg">
+              <el-input v-model="securityPatrolName" size="mini" placeholder="搜索任务名称" suffix-icon="el-icon-search" @change="searchByName"></el-input>
+            </div>
           </div>
-        </div>
-        <div class="task-list-container">
-          <ul class="task-table-list">
-            <li class="task-table-list-title">
-              <span>巡查任务</span>
-              <span>巡查点位数</span>
-              <span>操作</span>
-            </li>
-            <div class="item-area">
-              <li class="task-table-list-item" v-for="item in taskListData" :key="item.id">
-                <span>{{ item.securityPatrolName }}</span>
-                <span>{{ item.countPatrolPoints }}</span>
-                <span style="color: #498ee3; cursor: pointer" @click="toXc(item)">巡查</span>
+          <div class="task-list-container">
+            <ul class="task-table-list">
+              <li class="task-table-list-title">
+                <span>巡查任务</span>
+                <span>巡查点位数</span>
+                <span>操作</span>
               </li>
-            </div>
-          </ul>
-        </div>
-      </div>
-      <base-header title="预警联系人"></base-header>
-      <div class="card-item">
-        <div class="tools-panel" style="display: flex; align-items: center">
-          <el-select v-model="personStatus" size="mini" popper-class="u-popper-select">
-            <el-option label="在线" value="1"></el-option>
-            <el-option label="离线" value="2"></el-option>
-          </el-select>
-          <div class="input-bg">
-            <el-input v-model="personName" size="mini" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
+              <div class="item-area">
+                <li class="task-table-list-item" v-for="item in taskListData" :key="item.id">
+                  <span>{{ item.securityPatrolName }}</span>
+                  <span>{{ item.countPatrolPoints }}</span>
+                  <div style="display: flex; justify-content: center">
+                    <span style="color: #498ee3; cursor: pointer" @click="toXc(item)">巡查</span>
+                    <span style="color: #ff6a6c; cursor: pointer" @click="handleDelete(item)">删除</span>
+                  </div>
+                </li>
+              </div>
+            </ul>
           </div>
         </div>
-        <div class="person-list-container">
-          <ul class="person-list">
-            <li class="person-list-item" v-for="item in personList" :key="item.id">
-              <div class="person-status" :class="{ on: item.status === '在线', off: item.status === '离线' }">{{ item.status }}</div>
-              <div class="line"></div>
-              <div class="person-info">
-                <div class="person-name">
-                  <span>{{ item.name }}</span>
-                  <span class="phone">{{ item.phone }}</span>
+        <base-header title="预警联系人"></base-header>
+        <div class="card-item">
+          <div class="tools-panel" style="display: flex; align-items: center">
+            <el-select v-model="personStatus" size="mini" popper-class="u-popper-select">
+              <el-option label="在线" value="1"></el-option>
+              <el-option label="离线" value="2"></el-option>
+            </el-select>
+            <div class="input-bg">
+              <el-input v-model="personName" size="mini" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input>
+            </div>
+          </div>
+          <div class="person-list-container">
+            <ul class="person-list">
+              <li class="person-list-item" v-for="item in personList" :key="item.id">
+                <div class="person-status" :class="{ on: item.status === '在线', off: item.status === '离线' }">{{ item.status }}</div>
+                <div class="line"></div>
+                <div class="person-info">
+                  <div class="person-name">
+                    <span>{{ item.name }}</span>
+                    <span class="phone">{{ item.phone }}</span>
+                  </div>
+                  <div class="person-remark">{{ item.remark }}</div>
                 </div>
-                <div class="person-remark">{{ item.remark }}</div>
-              </div>
-              <div style="position: absolute; top: 0.04rem; right: 0.06rem">
-                <div class="btn details-btn" style="align-self: flex-start">详情</div>
-              </div>
-            </li>
-          </ul>
+                <div style="position: absolute; top: 0.04rem; right: 0.06rem">
+                  <div class="btn details-btn" style="align-self: flex-start">详情</div>
+                </div>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
-  </base-panel-right>
-   <AddInspectionTask :visible="addTaskShow" :inspectionOptions="inspectionOptions" @closeAddTask="closeAddTask" @getSecurityPatrolList="getSecurityPatrolList" @refreshData="toLoadLeftList"/>
-</div>
+    </base-panel-right>
+    <AddInspectionTask
+      :visible="addTaskShow"
+      :inspectionOptions="inspectionOptions"
+      @closeAddTask="closeAddTask"
+      @getSecurityPatrolList="getSecurityPatrolList"
+      @refreshData="toLoadLeftList"
+    />
+  </div>
 </template>
 <script>
 import BasePanelRight from '@/components/base-panel/base-panel-right'
 import BaseHeader from '@/components/base-header/base-header'
-import { getSecurityPatrolList,endPatrol } from '@/api/securityPatrolApi'
+import { getSecurityPatrolList, endPatrol, deleteSecurityPatrol } from '@/api/securityPatrolApi'
 import AddInspectionTask from './addInspectionTask.vue'
 import moment from 'moment'
+import { confirm } from '@/utils'
 export default {
   name: 'sandMonitorRight',
-  components: { BasePanelRight, BaseHeader,AddInspectionTask },
-  props:{
-    inspectionOptions:Array
+  components: { BasePanelRight, BaseHeader, AddInspectionTask },
+  props: {
+    inspectionOptions: Array
   },
   data() {
     return {
       securityPatrolName: '',
       taskListData: [],
       personStatus: '1',
-      addTaskShow:false,
+      addTaskShow: false,
       personName: '',
       personList: [
         {
@@ -111,34 +121,34 @@ export default {
           remark: '生态区监管'
         }
       ],
-      currentTime : '',
+      currentTime: '',
       isPatrolling: false,
       currentPatrolIndex: 0,
       patrolInterval: null,
-      inspectionPoint:[],
-      taskInfo:{},
-      xcId:null
+      inspectionPoint: [],
+      taskInfo: {},
+      xcId: null
     }
   },
   mounted() {
     this.getSecurityPatrolList()
-    this.$globalEventBus.$on('closeVideoPlay',()=>{
+    this.$globalEventBus.$on('closeVideoPlay', () => {
       this.stopPatrol()
     })
-     this.$globalEventBus.$on('toPlayNextVideo',()=>{
-        this.goToNextPatrolPoint()
-     })
+    this.$globalEventBus.$on('toPlayNextVideo', () => {
+      this.goToNextPatrolPoint()
+    })
   },
   methods: {
-    refreshData(){
-        this.getSecurityPatrolList()
-        this.$emit('refreshLeftList')
+    refreshData() {
+      this.getSecurityPatrolList()
+      this.$emit('refreshLeftList')
     },
-    toLoadLeftList(){
+    toLoadLeftList() {
       this.$emit('refreshLeftList')
     },
     toXc(item) {
-      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss'); 
+      this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
       this.xcId = item.id
       this.inspectionPoint = item.inspectionPoints
       this.taskInfo = JSON.parse(JSON.stringify(item))
@@ -150,25 +160,25 @@ export default {
         this.goToNextPatrolPoint()
       }, 20000)
     },
-     // 切换到下一个巡查点
+    // 切换到下一个巡查点
     goToNextPatrolPoint() {
       if (this.currentPatrolIndex >= this.inspectionPoint.length) {
         this.stopPatrol()
-        this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false ,type:"xc"})
+        this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false, type: 'xc' })
         const endTime = moment().format('YYYY-MM-DD HH:mm:ss')
-        endPatrol({id:this.xcId,endTime:endTime,startTime:this.currentTime}).then(()=>{
+        endPatrol({ id: this.xcId, endTime: endTime, startTime: this.currentTime }).then(() => {
           this.refreshData()
         })
         return
       }
-      this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false,type:'xc' })
-      setTimeout(()=>{
+      this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false, type: 'xc' })
+      setTimeout(() => {
         const point = this.inspectionPoint[this.currentPatrolIndex]
         this.flyToPoint(point)
         // 播放视频
         this.playVideo(point)
         this.currentPatrolIndex++
-      },100)
+      }, 100)
     },
     flyToPoint(point) {
       window.map.flyToPoint([point.longitude, point.latitude], {
@@ -199,22 +209,22 @@ export default {
     playVideo(point) {
       this.fetchUrl(point).then((res) => {
         if (res.code == 200) {
-            point.url = res.data.streamUrl
-              this.$globalEventBus.$emit('clickVideoInspectPlay', {taskInfo:this.taskInfo, point: point, visible: true,type:'xc' })
-          } else if (res.code == 4001) {
-            this.$message.warning(JSON.parse(res.msg).resultMsg)
-          }
+          point.url = res.data.streamUrl
+          this.$globalEventBus.$emit('clickVideoInspectPlay', { taskInfo: this.taskInfo, point: point, visible: true, type: 'xc' })
+        } else if (res.code == 4001) {
+          this.$message.warning(JSON.parse(res.msg).resultMsg)
+        }
       })
     },
     stopPatrol() {
       this.isPatrolling = false
       clearInterval(this.patrolInterval)
     },
-    
+
     addTask() {
       this.addTaskShow = true
     },
-    closeAddTask(){
+    closeAddTask() {
       this.addTaskShow = false
       this.getSecurityPatrolList()
       this.$emit('refreshLeftList')
@@ -227,9 +237,21 @@ export default {
     searchByName(name) {
       this.securityPatrolName = name
       this.getSecurityPatrolList()
+    },
+    handleDelete(row) {
+      confirm().then(() => {
+        deleteSecurityPatrol(row.id).then((res) => {
+          if (res.data) {
+            this.$message({ message: '删除成功', type: 'success' })
+            this.getSecurityPatrolList()
+          } else {
+            this.$message({ message: '删除失败', type: 'error' })
+          }
+        })
+      }).catch(() => {})
     }
   },
-  destroyed(){
+  destroyed() {
     this.$globalEventBus.$off('closeVideoPlay')
   }
 }
@@ -396,23 +418,23 @@ export default {
     text-align: center;
   }
 }
- .vSelect {
-    :deep(.el-input__inner) {
-      background: rgba(79, 159, 255, 0.3);
-      border-color: #4f9fff;
-      width: px-to-rem(96);
-      border-radius: px-to-rem(4);
-      color: #fff;
-      padding: 0 px-to-rem(2);
-    }
-    :deep(.el-input__suffix .el-input__icon) {
-      width: px-to-rem(18) !important;
-    }
+.vSelect {
+  :deep(.el-input__inner) {
+    background: rgba(79, 159, 255, 0.3);
+    border-color: #4f9fff;
+    width: px-to-rem(96);
+    border-radius: px-to-rem(4);
+    color: #fff;
+    padding: 0 px-to-rem(2);
   }
-  .vSelect:last-child {
-    margin-left: px-to-rem(10);
-    :deep(.el-input__inner) {
-      width: px-to-rem(58);
-    }
+  :deep(.el-input__suffix .el-input__icon) {
+    width: px-to-rem(18) !important;
+  }
+}
+.vSelect:last-child {
+  margin-left: px-to-rem(10);
+  :deep(.el-input__inner) {
+    width: px-to-rem(58);
   }
+}
 </style>