tmzn-weihe/src/views/safety-inspection/right.vue

<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>
            </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>
                  <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>
        <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 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>
    </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, 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
  },
  data() {
    return {
      securityPatrolName: '',
      taskListData: [],
      personStatus: '1',
      addTaskShow: false,
      personName: '',
      personList: [
        {
          id: 1,
          status: '在线',
          name: '杨英',
          phone: '15319086888',
          remark: '四乱（乱占、乱堆、乱采、乱建）'
        },
        {
          id: 2,
          status: '离线',
          name: '马刚',
          phone: '15191001567',
          remark: '人员监控（下河、游泳、钓鱼、垃圾漂浮物等）'
        },
        {
          id: 3,
          status: '在线',
          name: '马刚',
          phone: '15191001567',
          remark: '生态区监控'
        },
        {
          id: 4,
          status: '在线',
          name: '谢智宇',
          phone: '15319940131',
          remark: '生态区监管'
        }
      ],
      currentTime: '',
      isPatrolling: false,
      currentPatrolIndex: 0,
      patrolInterval: null,
      inspectionPoint: [],
      taskInfo: {},
      xcId: null
    }
  },
  mounted() {
    this.getSecurityPatrolList()
    this.$globalEventBus.$on('closeVideoPlay', () => {
      this.stopPatrol()
    })
    this.$globalEventBus.$on('toPlayNextVideo', () => {
      this.goToNextPatrolPoint()
    })
  },
  methods: {
    refreshData() {
      this.getSecurityPatrolList()
      this.$emit('refreshLeftList')
    },
    toLoadLeftList() {
      this.$emit('refreshLeftList')
    },
    toXc(item) {
      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))
      this.isPatrolling = true
      this.currentPatrolIndex = 0
      this.goToNextPatrolPoint()
      // 设置定时器，每20秒切换到下一个点
      this.patrolInterval = setInterval(() => {
        this.goToNextPatrolPoint()
      }, 20000)
    },
    // 切换到下一个巡查点
    goToNextPatrolPoint() {
      if (this.currentPatrolIndex >= this.inspectionPoint.length) {
        this.stopPatrol()
        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(() => {
          this.refreshData()
        })
        return
      }
      this.$globalEventBus.$emit('clickVideoInspectPlay', { visible: false, type: 'xc' })
      setTimeout(() => {
        const point = this.inspectionPoint[this.currentPatrolIndex]
        this.flyToPoint(point)
        // 播放视频
        this.playVideo(point)
        this.currentPatrolIndex++
      }, 100)
    },
    flyToPoint(point) {
      window.map.flyToPoint([point.longitude, point.latitude], {
        radius: 5000, // 飞行距离目标点的距离
        duration: 2 // 飞行持续时间（秒）
      })
    },
    fetchUrl(item) {
      return new Promise((resolve, reject) => {
        window
          .requestSDK(
            '/ttvideo/video/player/getVideoRealtimeUrl',
            {
              deviceCode: item.deviceCode,
              channelCode: item.channelCode,
              netType: 2,
              protocolType: 9,
              streamType: 1
            },
            {},
            'post'
          )
          .then(async (res) => {
            resolve(res)
          })
      })
    },
    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)
        }
      })
    },
    stopPatrol() {
      this.isPatrolling = false
      clearInterval(this.patrolInterval)
    },

    addTask() {
      this.addTaskShow = true
    },
    closeAddTask() {
      this.addTaskShow = false
      this.getSecurityPatrolList()
      this.$emit('refreshLeftList')
    },
    getSecurityPatrolList() {
      getSecurityPatrolList({ securityPatrolName: this.securityPatrolName, finishedState: 0 }).then((res) => {
        this.taskListData = res.data.records
      })
    },
    searchByName(name) {
      this.securityPatrolName = name
      this.getSecurityPatrolList()
    },
    handleDelete(row) {
      confirm()
        .then(() => {
          deleteSecurityPatrol(row.id).then((res) => {
            if (res.code === 200) {
              this.$message({ message: '删除成功', type: 'success' })
              this.getSecurityPatrolList()
            } else {
              this.$message({ message: 'res.msg , type: 'error' })
            }
          })
        })
        .catch(() => {})
    }
  },
  destroyed() {
    this.$globalEventBus.$off('closeVideoPlay')
  }
}
</script>
<style scoped lang="scss">
@import url('@/assets/scss/px-to-rem.scss');
.safety-inspection-right-container {
  position: relative;
  height: 100%;
  z-index: 1;
  .card-item {
    position: relative;
    width: 3.68rem;
    padding: px-to-rem(10);
    margin-bottom: px-to-rem(19);
    background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
    :deep(.el-input__inner) {
      background: transparent;
      color: #fff;
      border: none;
    }
  }
  .tools-panel {
    .input-bg {
      margin: px-to-rem(10) 0;
      background: url('@/assets/image/safety-inspection/search-bg.png') no-repeat 0 0 / 100% 100%;
    }
    :deep(.el-select) {
      margin-right: px-to-rem(10);
      .el-input__inner {
        background: transparent;
        border: 1px solid;
        border-color: #4f9fff;
        width: px-to-rem(100);
        color: #fff;
      }
    }
  }
  .task-list-container {
    .task-table-list {
      &-title {
        display: flex;
        justify-content: space-between;
        color: #f2f6ff;
        font-size: px-to-rem(16);
        padding: 0 px-to-rem(10);
        height: px-to-rem(35);
        line-height: px-to-rem(35);
        background: #244e81;
      }
      &-item {
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: px-to-rem(16);
        padding: px-to-rem(4) px-to-rem(10);
        margin-bottom: px-to-rem(1.8);
        height: px-to-rem(35);
        line-height: px-to-rem(35);
        background: #153057;
        box-sizing: border-box;
        span {
          display: inline-block;
          width: 40%;
        }
        span:first-child {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        span:last-child {
          width: px-to-rem(50);
          text-align: right;
        }
      }
      .item-area {
        height: px-to-rem(324);
        overflow: auto;
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }

  .person-list-container {
    .person-list {
      &-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        height: px-to-rem(64);
        border: 1px solid #0670b4;
        border-radius: px-to-rem(50) 0 0 px-to-rem(50);
        padding: px-to-rem(10);
        margin-bottom: px-to-rem(20);
        .person-status {
          width: px-to-rem(41);
          height: px-to-rem(41);
          line-height: px-to-rem(41);
          text-align: center;
          padding: px-to-rem(2);
          border-radius: 50%;
          font-weight: bold;
          font-size: px-to-rem(14);
        }
        .on {
          background: rgba(13, 201, 133, 0.1);
          border: 1px solid #0dc985;
          color: #0dc985;
        }
        .off {
          background: rgba(145, 158, 183, 0.1);
          border: 1px solid #919eb7;
          color: #919eb7;
        }
        .line {
          width: px-to-rem(1);
          height: px-to-rem(42);
          background: #919eb7;
          margin: 0 px-to-rem(10);
        }
        .person-info {
          display: flex;
          flex-direction: column;
          flex: 1;
          .person-name {
            font-weight: bold;
            font-size: px-to-rem(16);
            color: #fff;
            font-weight: 500;
            margin-bottom: px-to-rem(5);
            .phone {
              margin-left: px-to-rem(15);
              font-weight: bold;
              font-size: px-to-rem(14);
              color: #919eb7;
            }
          }
          .person-remark {
            font-size: px-to-rem(12);
            color: #919eb7;
            margin-bottom: px-to-rem(10);
          }
        }
      }
    }
  }
  .details-btn {
    width: px-to-rem(36);
    height: px-to-rem(22);
  }
  .add-btn {
    width: px-to-rem(90);
    height: px-to-rem(24);
  }
  .btn {
    cursor: pointer;
    background: linear-gradient(0deg, #468adb 0%, #366dae 100%);
    border-radius: px-to-rem(4);
    border: px-to-rem(1) solid rgba(255, 255, 255, 0.8);
    font-size: px-to-rem(14);
    color: #ffffff;
    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:last-child {
  margin-left: px-to-rem(10);
  :deep(.el-input__inner) {
    width: px-to-rem(58);
  }
}
</style>