tnbapp/src/views/post/CamList.vue

<template>
  <el-row>
    <el-row>
      <el-button
        size="mini"
        type="warning"
        class="el-icon-document-add"
        @click="handleAdd"
      >添加</el-button>
      <el-table
        :data="dataList"
        style="width: 100%"
      >
        <el-table-column
          label="No"
          type="index"
        />
        <el-table-column
          prop="addAt"
          label="添加时间"
          width="150"
        />
        <el-table-column
          prop="camName"
          label="摄像头名字"
          width="150"
        >
          <template slot-scope="scope">
            <router-link style="text-decoration-line: none" target="_blank" :to="`/my/cam/${scope.row.camId}/live`">
              {{ scope.row.camName }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state" :type="'success'" disable-transitions>
              推流中
            </el-tag>
            <el-tag v-else :type="'danger'" disable-transitions>
              离线
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >修改名字</el-button>
            <el-button
              size="mini"
              @click="handleDetail(scope.$index, scope.row)"
            >推流地址</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加摄像头对话框 -->
      <el-dialog
        append-to-body
        :visible.sync="showEditScopeDialog"
        width="50%"
        center
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3>添加摄像头</h3>
          </div>
          <div class="text item">
            <el-form ref="form" :model="addCamForm" label-width="80px">
              <el-form-item label="设备 ID">
                <el-input v-model="addCamForm.deviceId" />
              </el-form-item>
              <el-form-item label="设备名字">
                <el-input v-model="addCamForm.deviceName" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onAddCam">立即添加</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-dialog>
      <!-- 修改摄像头名字对话框 -->
      <el-dialog
        append-to-body
        :visible.sync="showUpdateDialog"
        width="50%"
        center
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3>修改摄像头名字</h3>
          </div>
          <div class="text item">
            <el-form ref="form" :model="updateNameForm" label-width="80px">
              <el-form-item label="新名字">
                <el-input v-model="updateNameForm.newName" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onUpdateCam">立即修改</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-dialog>
      <!-- 摄像头详情对话框 -->
      <el-dialog
        append-to-body
        :visible.sync="showDetailDialog"
        width="50%"
        center
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <h3>推流地址</h3>
          </div>
          <div class="text item">
            <h3>{{ pushUrl }}</h3>
          </div>
        </el-card>
      </el-dialog>
    </el-row>
    <el-row>
      <el-pagination
        background
        :small="screenWidth <= 768"
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="totalSize"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
      />
    </el-row>
  </el-row>
</template>

<script>
import {
  getVideoResource
} from '@/api/video'
import { addCam, deleteCam, getCamPushUrl, getUserCams, updateCamName } from '@/api/cam'

export default {
  name: 'CamList',
  data() {
    return {
      // 屏幕宽度, 为了控制分页条的大小
      screenWidth: document.body.clientWidth,
      currentPage: 1,
      pageSize: 20,
      totalSize: 0,
      dataList: [],
      // **********************************************************************
      showEditScopeDialog: false,
      showUpdateDialog: false,
      showDetailDialog: false,
      videoResources: [],
      addCamForm: {
        deviceId: null,
        deviceName: null
      },
      updateNameForm: {
        camId: null,
        newName: null
      },
      pushUrl: null
    }
  },
  created() {
    document.title = '摄像头列表'
    this.getData(this.currentPage)
  },
  methods: {
    handleCurrentChange(pageNumber) {
      this.currentPage = pageNumber
      this.getData(this.currentPage)
      // 回到顶部
      scrollTo(0, 0)
    },
    getData() {
      this.dataList = []
      getUserCams(this.currentPage).then(resp => {
        if (resp.code === 0) {
          this.dataList = resp.data.list
          this.totalSize = resp.data.totalSize
        } else {
          this.$notify({
            title: '提示',
            message: resp.msg,
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'error',
          duration: 3000
        })
      })
    },
    handleVideoResource(index, row) {
      const videoId = row.videoId
      getVideoResource(videoId).then(resp => {
        if (resp.code === 0) {
          this.videoResources = resp.data
        }
      })
    },
    handleAdd(index, row) {
      this.showEditScopeDialog = true
    },
    handleEdit(index, row) {
      this.updateNameForm.camId = row.camId
      this.showUpdateDialog = true
    },
    handleDetail(index, row) {
      getCamPushUrl(row.camId).then(resp => {
        if (resp.code === 0) {
          this.pushUrl = resp.data
          this.showDetailDialog = true
        }
      })
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除 ' + row.title + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCam(row.camId).then(resp => {
          if (resp.code === 0) {
            this.$notify({
              title: '提示',
              message: '摄像头已删除',
              type: 'warning',
              duration: 3000
            })
            this.$router.go(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    onAddCam() {
      this.showEditScopeDialog = false
      addCam(this.addCamForm).then(resp => {
        if (resp.code === 0) {
          this.addCamForm = {
            deviceId: null,
            deviceName: null
          }
          this.$notify({
            title: '提示',
            message: '摄像头已添加',
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'warning',
          duration: 3000
        })
      })
    },
    onUpdateCam() {
      this.showUpdateDialog = false
      updateCamName(this.updateNameForm).then(resp => {
        if (resp.code === 0) {
          this.$notify({
            title: '提示',
            message: '摄像头名字已更新',
            type: 'warning',
            duration: 3000
          })
        }
      }).catch(error => {
        this.$notify({
          title: '提示',
          message: error.message,
          type: 'warning',
          duration: 3000
        })
      })
    }
  }
}
</script>

<style>
</style>