qa-regulatory-gwj-vue/src/views/map/dialog/alarmDevice.vue

<template>
  <div class="app-container print-work">
    <!--消防控制室-->
    <div class="level-title">
      <h1>基础信息</h1>
    </div>
    <table class="table-ui">
      <tr>
        <td class="bbg-transparent">指标源</td>
        <td colspan="2">{{ pd.INDICATORSOURCE }}</td>
      </tr>
      <tr>
        <td class="bbg-transparent">报警阈值</td>
        <td colspan="2">{{ pd.ALARMTHRESHOLD }}</td>
      </tr>
      <tr>
        <td class="bbg-transparent">经纬度</td>
        <td colspan="2">{{ pd.LONGITUDE + '-' + pd.LATITUDE }}</td>
      </tr>
      <tr>
        <td class="bbg-transparent">接受报警人</td>
        <td colspan="2">{{ pd.RECIPIENT_NAME }}</td>
      </tr>
      <tr>
        <td class="bbg-transparent">修改时间</td>
        <td colspan="2">{{ pd.OPERATE_TIME }}</td>
      </tr>
      <tr>
        <td class="bbg-transparent">类型</td>
        <td colspan="2">{{ pd.TYPE === '0' ? '指标分析' : pd.TYPE === '1' ? '报警源接入' : '未定义' }}</td>
      </tr>
    </table>
    <div v-show="alarmInfoList != null && alarmInfoList.length > 0" class="table-ui">
      <div class="level-title" style="position: relative; top: 25px">
        <h1>报警信息</h1>
      </div>
      <div v-for="(item,index) in alarmInfoList" :key="index" style="position: relative; top: 25px">
        <div class="item">
          <table class="table-ui">
            <div>{{ '报警信息' + (index+1) + '：' }}</div>
            <tr>
              <td class="bbg-transparent">报警值</td>
              <td>{{ item.SOURCE_VALUE }}</td>
            </tr>
            <tr>
              <td class="bbg-transparent">报警时间</td>
              <td>{{ item.CREATE_TIME }}</td>
            </tr>
            <tr>
              <td class="bbg-transparent">是否报警信息</td>
              <td>{{ item.IS_ALARM === '1' ? '是' : item.IS_ALARM === '2' ? '否' : '未审核' }}</td>
            </tr>
          </table>
        </div>
      </div>
      <el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" width="600px">
        <iframe :src="VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
        <div slot="footer" class="dialog-footer">
          <el-button @click="back">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <table class="table-ui">
      <div class="level-title" style="position: relative; top: 50px">
        <h1>附近摄像头</h1>
      </div>
      <div v-for="(item,index) in videoList" :key="index" style="position: relative; top: 50px">
        <div class="item">
          <table class="table-ui">
            <div>{{ '摄像头' + (index+1) + '：' }}</div>
            <tr>
              <td class="bbg-transparent">摄像头名称</td>
              <td>{{ item.NAME }}</td>
            </tr>
            <tr>
              <td class="bbg-transparent">摄像头位置</td>
              <td>{{ item.LONGITUDE + '-' + item.LATITUDE }}</td>
            </tr>
            <tr>
              <td class="bbg-transparent">播放视频</td>
              <td><el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(item)">播放</el-button></td>
            </tr>
          </table>
        </div>
      </div>
      <el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" :show-close="false" title="视频2" width="600px">
        <iframe :src="VIDEOURL" width="100%" height="380" allowfullscreen allow="autoplay; fullscreen;microphone" style="position: relative;border:none"/>
        <div slot="footer" class="dialog-footer">
          <el-button @click="back">取 消</el-button>
        </div>
      </el-dialog>
    </table>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import moment from 'moment'
export default {
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    gangkou: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      config: config,
      FIRERESOURCES_NAME: '',
      pd: {},
      videoList: [],
      images: [],
      pumpRoomList: [],
      dialogVideo: false,
      alarmInfoList: [],
      VIDEOURL: ''
    }
  },
  watch: {
    'id': function(now, old) {
      if (now) {
        this.getData()
      }
    }
  },
  created() {
    this.getData()
    this.getAlarmInfo()
    this.getVideoData()
  },
  methods: {
    back() {
      if (this.dialogVideo) this.dialogVideo = false
    },
    // 五分钟关闭视频播放页面定时任务
    start() {
      console.log('定时器开启')
      this.timer = setInterval(this.closeVideoStart, (5 * 60 * 1000)) // 5分钟
    },
    over() {
      // 定时器手动关闭
      console.log('定时器自动关闭')
      this.$message.warning('单次播放时长已到5分钟自动关闭')
      clearInterval(this.timer)
    },
    closeVideoStart() {
      this.dialogVideo = false
      this.dialogVideoHLS = false
      this.dialogVideoBack = false
      this.dialogVideoAll = false
      this.over()
    },
    // 播放
    handleBack() {
      if (this.dialogVideoAll) {
        for (let i = 0; i < this.playerList.length; i++) {
          this.playerList[i].dispose()
        }
        this.dialogVideoAll = false
      }
      if (this.dialogVideoHLS) {
        this.player.dispose()
        this.dialogVideoHLS = false
      }
    },
    showVideo(row) {
      this.$message.warning('单次播放最多五分钟')
      this.start()
      if (row.VIDEO_TYPE === '0') {
        this.VIDEOURL = row.VIDEO_URL
        this.dialogVideo = true
      } else {
        requestFN(
          '/platformvideomanagement/getHlsPath',
          {
            INDEXCODE: row.CODE
          }
        ).then((res) => {
          this.dialogVideoHLS = true
          this.$nextTick(() => {
            // eslint-disable-next-line no-undef
            this.player = new Aliplayer({
              'id': 'aLiVideoPlayer',
              'source': res.data.url,
              'width': '100%',
              'height': '500px',
              'autoplay': true,
              'isLive': true,
              'rePlay': false,
              'playsinline': true,
              'preload': true,
              'controlBarVisibility': 'hover',
              'useH5Prism': true
            }, function(player) {
              console.log('The player is created')
            })
          })
        }).catch((e) => {
          this.over()
          this.listLoading = false
        })
      }
    },
    formatDate(date, format) {
      if (date) {
        return moment(date).format(format)
      } else {
        return ''
      }
    },
    getData() {
      requestFN(
        '/alarmDeviceMaintenance/getById',
        {
          ALARMDEVICEMAINTENANCE_ID: this.id,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.pd = data.pageData
      }).catch((e) => {
      })
    },
    getAlarmInfo() {
      requestFN(
        '/alarmInformation/getAlarmInfoById',
        {
          ALARMDEVICEMAINTENANCE_ID: this.id,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.alarmInfoList = data.alarmInfoList
      }).catch((e) => {
      })
    },
    getVideoData() {
      requestFN(
        '/alarmDeviceMaintenance/getVideoById',
        {
          ALARMDEVICEMAINTENANCE_ID: this.id,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.videoList = data.videoList
      }).catch((e) => {
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.img {
  display: flex;

  .img_item {
    margin-left: 10px;

    &:first-child {
      margin-left: 0;
    }

    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>