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

<template>
  <div class="add-inspection-task-container" v-if="visible">
    <div class="add-inspection-task-title">
      <span class="title-text">新增巡查任务</span>
      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="closeModal" />
    </div>
    <div class="add-inspection-task-content">
      <el-form ref="addTaskFormRef" :rules="rules" :model="addTaskFrom" label-width="0.8rem" size="mini">
        <el-form-item label="任务名称" prop="securityPatrolName">
          <el-input v-model="addTaskFrom.securityPatrolName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="任务内容">
          <el-input type="textarea" rows="4" v-model="addTaskFrom.securityPatrolContext" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="巡查点" prop="inspectionPoint">
          <div v-for="(item, index) in addTaskFrom.inspectionPoint" :key="index" class="ins-point">
            <el-select v-model="item.value" placeholder="请选择巡查点" :popper-append-to-body="false" popper-class="u-popper-select" @change="onPointSelect">
              <el-option :label="opt.devName" :value="opt.deviceCode" :disabled="opt.disabled" v-for="opt in inspectionOptions" :key="opt.deviceCode"></el-option>
            </el-select>
            <img src="@/assets/image/safety-inspection/del.png" alt="" @click="removeOption(index)" v-if="isFirstItem()" />
            <img src="@/assets/image/safety-inspection/add.png" alt="" v-if="isLastItem(index)" @click="addOption" />
          </div>
        </el-form-item>
        <el-form-item label="责任人" prop="responsiblePerson">
          <el-select v-model="addTaskFrom.responsiblePerson" placeholder="请选择责任人" style="width: 100%" :popper-append-to-body="false" popper-class="u-popper-select">
            <el-option :label="p.name" :value="p.name" v-for="(p, i) in personList" :key="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: flex-end; margin-top: 0.22rem">
            <el-button size="mini" plain @click="closeModal" class="cancelBtn">取消</el-button>
            <el-button size="mini" type="primary" @click="toSave">保存</el-button>
            <el-button size="mini" type="primary" @click="startInspection">开始巡查</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import "mars3d/dist/mars3d.css"
import * as mars3d from 'mars3d'
import Vue from 'vue'
import { toAddSecurityPatrol, endPatrol, startPatrol } from '@/api/securityPatrolApi'
import moment from 'moment'
// 为了方便使用,绑定到原型链，在其他vue文件，直接this.mars3d 来使用
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium
export default {
  name: 'addInspectionTask',
  props: {
    visible: Boolean,
    inspectionOptions: Array
  },
  data() {
    return {
      addTaskFrom: {
        securityPatrolName: '',
        securityPatrolContext: '',
        inspectionPoint: [{ value: '' }],
        responsiblePerson: ''
      },
      rules: {
        securityPatrolName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
        inspectionPoint: [{ required: true, validator: this.validateInspectionPoints, trigger: 'change' }],
        responsiblePerson: [{ required: true, message: '请选择责任人', trigger: 'change' }]
      },
      personList: [
        {
          name: '杨英'
        },
        {
          name: '马刚'
        },
        {
          name: '谢智宇'
        }
      ],
      fieldErrors: {},
      isPatrolling: false,
      currentPatrolIndex: 0,
      currentTime: '',
      patrolInterval: null,
      xcId: ''
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.addTaskFrom = {
          securityPatrolName: '',
          securityPatrolContext: '',
          inspectionPoint: [{ value: '' }],
          responsiblePerson: ''
        }
      }
    }
  },
  mounted() {
    this.$globalEventBus.$on('closeVideoPlayAdd', () => {
      this.stopPatrol()
    })
    this.$globalEventBus.$on('toPlayNextVideoAdd', () => {
      this.goToNextPatrolPoint()
    })
  },
  methods: {
    // 验证巡查点
    validateInspectionPoints(rule, value, callback) {
      this.fieldErrors = {}
      let isValid = true
      let hasDuplicate = false

      // 检查是否所有巡查点都已选择
      this.addTaskFrom.inspectionPoint.forEach((item, index) => {
        if (!item.value) {
          isValid = false
          this.$set(this.fieldErrors, index, '请选择巡查点')
        }
      })

      // 检查是否有重复选择
      const selectedValues = this.addTaskFrom.inspectionPoint.map((item) => item.value).filter((v) => v)

      const uniqueValues = new Set(selectedValues)
      if (selectedValues.length !== uniqueValues.size) {
        isValid = false
        hasDuplicate = true
      }

      if (!isValid) {
        if (hasDuplicate) {
          callback(new Error('不能重复选择相同的巡查点'))
        } else {
          callback(new Error('请确保所有巡查点都已选择'))
        }
      } else {
        callback()
      }
    },
    closeModal() {
      this.$emit('closeAddTask')
    },
    toSave() {
      this.$refs.addTaskFormRef.validate((valid) => {
        if (valid) {
          toAddSecurityPatrol(this.addTaskFrom).then((res) => {
            if (res.data) {
              this.$message.success('添加成功')
              this.closeModal()
            } else {
              this.$message.error('添加失败')
            }
          })
        }
      })
    },
    onPointSelect(a) {
      const obj = this.inspectionOptions.filter((item) => item.deviceCode == a)
      this.addTaskFrom.inspectionPoint.map((point) => {
        if (point.value == a) {
          Object.assign(point, obj[0])
        }
      })
    },
    startInspection() {
      this.$refs.addTaskFormRef.validate((valid) => {
        if (valid) {
          startPatrol(this.addTaskFrom).then((res) => {
            this.xcId = res.data.newSercurity.id
          })
          this.$emit('closeAddTask')
          this.currentTime = moment().format('YYYY-MM-DD HH:mm:ss')
          if (this.addTaskFrom.inspectionPoint === 0) {
            this.$message.warning('请先添加至少一个巡查点')
            return
          }
          this.addTaskFrom.inspectionPoint.forEach((item, index) => {
            this.fetchUrl(item).then((res) => {
              let url = ''
              if (res.code == 200) {
                url = res.data.streamUrl
              } else if (res.code == 400) {
                this.$message.error(res.msg)
              } else if (res.code == 4001) {
                this.$message.warning('设备离线')
              }

              this.$set(this.addTaskFrom.inspectionPoint[index], 'url', url)
            })
          })
          this.isPatrolling = true
          this.currentPatrolIndex = 0
          this.goToNextPatrolPoint()
          // 设置定时器，每20秒切换到下一个点
          this.patrolInterval = setInterval(() => {
            this.goToNextPatrolPoint()
          }, 20000)
        }
      })
    },
    fetchUrl(item) {
      return new Promise((resolve, reject) => {
        window
          .requestSDK(
            '/ttvideo/video/player/getVideoRealtimeUrl',
            {
              deviceCode: item.deviceCode,
              channelCode: item.channelCode,
              netType: '1',
              protocolType: 5,
              streamType: 1
            },
            {},
            'post'
          )
          .then(async (res) => {
            resolve(res)
          })
      })
    },
    // 切换到下一个巡查点
    goToNextPatrolPoint() {
      if (this.currentPatrolIndex >= this.addTaskFrom.inspectionPoint.length) {
        const endTime = moment().format('YYYY-MM-DD HH:mm:ss')
        this.stopPatrol()
        this.$globalEventBus.$emit('clickVideoPlay', { visible: false, type: 'add' })
        endPatrol({ id: this.xcId, endTime: endTime, startTime: this.currentTime }).then((res) => {
          this.$emit('refreshData')
        })
        return
      }
        const point = this.addTaskFrom.inspectionPoint[this.currentPatrolIndex]
        this.flyToPoint(point)
        // 播放视频
        this.playVideo(point)
        this.currentPatrolIndex++
    },
    playVideo(point) {
      console.info(point)
      this.$globalEventBus.$emit('clickVideoPlay', { point: point, visible: true, type: 'add' })
    },
    stopPatrol() {
      this.isPatrolling = false
      clearInterval(this.patrolInterval)
    },
    // 定位到点
    flyToPoint(point) {
      window.map.flyToPoint([point.longitude, point.latitude], {
        radius: 5000, // 飞行距离目标点的距离
        duration: 2 // 飞行持续时间（秒）
      })
    },
    isLastItem(index) {
      return index === this.addTaskFrom.inspectionPoint.length - 1
    },
    isFirstItem() {
      return this.addTaskFrom.inspectionPoint.length > 1
    },
    addOption() {
      this.addTaskFrom.inspectionPoint.push({ value: '' })
    },
    removeOption(index) {
      if (this.addTaskFrom.inspectionPoint.length > 1) {
        this.addTaskFrom.inspectionPoint.splice(index, 1)
        this.$refs.addTaskFormRef.validateField('inspectionPoint');
      }
    }
  },
  destroyed() {
    this.stopPatrol()
    this.$globalEventBus.$off('closeVideoPlayAdd')
  }
}
</script>

<style scoped lang="scss">
.add-inspection-task-container {
  position: absolute;
  top: 0.8rem;
  right: 4.85rem;
  width: px-to-rem(422);
  z-index: 9999;
  .add-inspection-task-title {
    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
    background-size: 100% 100%;
    height: px-to-rem(39);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px-to-rem(20);
    font-size: px-to-rem(16);
    color: #fff;
    .title-text {
      font-weight: bold;
      margin-left: px-to-rem(20);
    }
  }
  .add-inspection-task-content {
    padding: px-to-rem(20);
    min-height: px-to-rem(407);
    background: rgb(35, 61, 108, 0.8);
    :deep(.el-form) {
      .el-button {
        font-size: px-to-rem(14);
      }
      .el-form-item__label {
        color: #fff;
        font-size: px-to-rem(14);
      }
      .el-input__inner,
      .el-textarea__inner {
        background: rgba(79, 159, 255, 0.12);
        border-radius: 4px;
        border: 1px solid #4f9fff;
        background: transparent;
        color: #fff;
      }
    }
    .ins-point {
      display: flex;
      align-items: center;
      gap: px-to-rem(5);
      margin-bottom: px-to-rem(20);
    }
    .ins-point:last-child {
      margin-bottom: 0;
    }
    :deep(.el-button) {
      line-height: initial;
      background: rgba(79, 159, 255, 0.8);
      padding: px-to-rem(3) px-to-rem(7);
    }
    .cancelBtn {
      border: 1px solid #4f9fff;
      color: #fff;
      background-color: transparent;
    }
  }
}
</style>