qa-regulatory-gwj-vue/src/views/keyprojects/videomanager/components/bobileCamer.vue

<template>
  <div>
    <el-dialog
      v-if="visible"
      :visible.sync="visible"
      :before-close="handleClose"
      :append-to-body="true"
      title="移动摄像头"
      width="60%">
      <div class="app-container">
        <div class="filter-container">
          <el-form>
            <el-row :gutter="20">
              <el-col :span="6">  <el-form-item label="视频名称">
                <el-input v-model="KEYWORDS" placeholder="请输入关键字" class="filter-item" style="width: 150px;"/>
              </el-form-item></el-col>
              <el-col :span="6">
                <el-form-item >
                  <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
                    搜索
                  </el-button>
                  <el-button v-waves class="filter-item" type="success" icon="el-icon-refresh" @click="goKeyReset">
                    重置
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          border
          tooltip-effect="dark"
          style="width: 100%">
          <el-table-column type="index" label="序号" width="55" align="center"/>
          <el-table-column :formatter="getUnitName" prop="UNITS_ID" label="所属相关方"/>
          <el-table-column prop="MODEL" label="视频型号"/>
          <el-table-column prop="VIDEONAME" label="视频名称"/>
          <el-table-column prop="VIDEOURL" label="播放地址"/>
          <el-table-column prop="CODE" label="摄像头编号"/>
          <el-table-column prop="PERSON" label="负责人"/>
          <el-table-column prop="PHONE" label="手机号"/>
          <el-table-column label="操作" width="250px">
            <template slot-scope="{row}">
              <el-button type="success" icon="el-icon-caret-right" size="mini" @click="showVideo(row)">播放</el-button>
              <el-button type="success" icon="el-icon-circle-check" size="mini" @click="selectVideo(row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeWindow">关 闭</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogVideo" :visible.sync="dialogVideo" title="视频" append-to-body 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>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves'
export default {
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      // 播放
      dialogVideo: false,
      dialogVideoHLS: false,
      dialogVideoBack: false,
      dialogVideoAll: false,
      VIDEOURL: '',
      player: {},
      //
      config: config,
      visible: false,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      total: 0,
      KEYWORDS: '',
      UNITS_ID: '',
      varList: [],
      unitsList: [],
      allCodes: []
    }
  },

  methods: {
    async init(UNITS_ID) {
      this.visible = true
      this.UNITS_ID = UNITS_ID
      this.varList = []
      this.KEYWORDS = ''
      await this.getUnitsList()
      this.getList()
    },
    getRowKey(row) {
      return row.VIDEO_RESOURCES_ID
    },
    getUnitsList() {
      requestFN(
        '/units/listAll'
      ).then((data) => {
        this.unitsList = data.varList
      }).catch((e) => {
      })
    },
    getUnitName(e) {
      const unit = this.unitsList.filter(t => {
        return t.UNITS_ID == e.UNITS_ID
      })
      if (unit.length > 0) {
        return unit[0].UNITS_NAME
      } else {
        return ''
      }
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    // 播放
    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
      }
    },
    back() {
      if (this.dialogVideo) this.dialogVideo = false
      if (this.dialogVideoBack) this.dialogVideoBack = false
      if (this.dialogVideoAll) {
        this.dialogVideoAll = false
        for (let i = 0; i < this.playerList.length; i++) {
          this.playerList[i].dispose()
        }
      }
      if (this.dialogForm) this.dialogForm = false
      if (this.dialogVideoHLS) {
        this.dialogVideoHLS = false
        this.player.dispose()
      }
    },
    showVideo(row) {
      if (!row.PLATFORMVIDEOMANAGEMENT_ID) {
        this.VIDEOURL = row.VIDEOURL
        this.dialogVideo = true
      } else {
        requestFN(
          '/platformvideomanagement/getHlsPath',
          {
            INDEXCODE: row.INDEXCODE
          }
        ).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.listLoading = false
        })
      }
    },
    // 播放 end-------------
    // 获取列表
    getList() {
      this.listLoading = true
      this.varList = []
      requestFN(
        '/videoResources/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          VIDEONAME: this.KEYWORDS
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
      }).catch((e) => {
        this.listLoading = false
      })
    },

    selectVideo(row) {
      this.$emit('bobilehandleSelected', row)
      this.closeWindow()
    },

    goKeyReset() {
      this.KEYWORDS = ''
      this.getList()
    },

    handleClose() {
      this.visible = false
    },
    closeWindow() {
      this.handleClose()
    }
  }

}

</script>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>