hyyfClient/src/views/Video/VideoAdmin.vue

<template>
  <div class="videoAdmin">
    <!-- 查询   -->
    <query-conditions :formItems="searchList" @getQueryParams="handleQuery"></query-conditions>
    <!-- 表格   -->
    <new-table :height="600" :title="title" :listData="videoLists" :tableItems="tableItems" :shows="tableShows" @selectionChange="selectionChange">
      <template #right>
        <el-button size="mini" type="primary" v-if="hasPerm('video:add')" style="margin-right: 10px" @click="add">添加监控</el-button>
        <el-button size="mini" type="danger" v-if="hasPerm('video:del')" @click="delAll">批量删除</el-button>
      </template>
      <template #start="scope">
        <el-switch v-model="scope.row.runStatus" @change="onSwitch(scope.row)"></el-switch>
      </template>
      <template #handler="scope">
        <el-button size="mini" style="margin-right: 10px" v-if="hasPerm('video:edit')" @click="edit(scope.row)">编辑</el-button>
        <el-popconfirm
            title=" 确定要删除这个区域吗？"
            @confirm="del(scope.row)"
        >
          <el-button type="danger"  v-if="hasPerm('video:del')" size="mini" slot="reference">删除</el-button>
        </el-popconfirm>
        <el-button size="mini" type="primary" style="margin-left: 10px" @click="open(scope.row)">查看摄像头</el-button>
      </template>
    </new-table>
    <table-footer
        :totals="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @pageChange="pageChange"></table-footer>
    <!-- 新增编辑   -->
    <el-dialog
        :title="showType ? '编 辑' : '新 增'"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="mini">
          <el-form-item label="摄像头名称" prop="cameraName">
            <el-input v-model="form.cameraName"></el-input>
          </el-form-item>
          <el-form-item label="所属区域" prop="areaId">
            <el-select v-model="form.areaId">
              <el-option v-for="item in searchList[0].options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属品牌" prop="brandId">
            <el-select v-model="form.brandId">
              <el-option v-for="item in searchList[1].options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="ip地址" prop="cameraIp">
            <el-input v-model="form.cameraIp"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="account">
            <el-input v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="斯高德房间id">
            <el-input v-model="form.roomId"></el-input>
          </el-form-item>
<!--          <el-form-item label="排序" prop="sort">-->
<!--            <el-input v-model="form.sort"></el-input>-->
<!--          </el-form-item>-->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="reset">重 置</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit('form')">{{showType ? '更 新' : '新 增'}}</el-button>
        </span>
    </el-dialog>
    <el-dialog
        :title="cameraTitle"
        :visible.sync="isVideo"
        width="50%">
      <div style="width: 100%; height: 560px; text-align: center;">
        <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 100%; height: 530px;" frameborder="0"  allowfullscreen="true"></iframe>
        <div>
          <el-button :disabled="last === null" size="small" @click="getNext(last)">上一个</el-button>
          <el-button :disabled="next === null" size="small" @click="getNext(next)">下一个</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import QueryConditions from "@/components/bioSafety/QueryConditions";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
import {areaList, brandList, videoList, videoSwitch, delVideo, addVideo, editVideo, getVideo} from '../../utils/api'
import {arrToIds} from "@/utils";
export default {
  name: "VideoAdmin",
  components: {
    QueryConditions,
    NewTable,
    TableFooter,
  },
  data() {
    return {
      searchList: [
        {
          type: 'select',
          label: '区域搜索：',
          placeholder: '请选择区域',
          field: 'areaId',
          options: []
        },
        {
          type: 'select',
          label: '摄像头品牌：',
          placeholder: '请选择品牌',
          field: 'brandId',
          options: []
        },
        // {
        //   type: 'select',
        //   label: '摄像头排序：',
        //   placeholder: '请选择排序',
        //   field: 'sort',
        //   options: [
        //     {
        //       label: '正序',
        //       value: 0,
        //     },
        //     {
        //       label: '倒序',
        //       value: 1
        //     }
        //   ]
        // },
        {
          type: 'input',
          label: '名称搜索：',
          placeholder: '请输入摄像头名称',
          field: 'keyWord'
        },
      ],
      keyWord: '',
      areaId: '',
      brandId: '',
      sort: '',
      pageNum: 1,
      pageSize: 20,
      total: 0,
      videoLists: [],
      title: '监控列表',
      tableItems: [
        {
          prop: 'id',
          label: 'ID',
          minWidth: '50',
          slotName: 'id'
        },
        {
          prop: 'cameraName',
          label: '摄像头名称',
          minWidth: '100',
          slotName: 'cameraName'
        },
        {
          prop: 'areaName',
          label: '所属区域',
          minWidth: '100',
          slotName: 'areaName'
        },
        {
          prop: 'brandName',
          label: '所属品牌',
          minWidth: '100',
          slotName: 'brandName'
        },
        {
          prop: 'cameraIp',
          label: 'ip地址',
          minWidth: '100',
          slotName: 'cameraIp'
        },
        {
          prop: 'account',
          label: '用户名',
          minWidth: '100',
          slotName: 'account'
        },
        {
          prop: 'password',
          label: '密码',
          minWidth: '100',
          slotName: 'password'
        },
        // {
        //   prop: 'sort',
        //   label: '排序',
        //   minWidth: '50',
        //   slotName: 'sort'
        // },
        {
          label: '是否启用',
          minWidth: '80',
          slotName: 'start'
        },
        {
          label: '操作',
          minWidth: '150',
          slotName: 'handler'
        }
      ],
      tableShows: {
        showIndex: false,
        showSelect: true
      },
      dialogVisible: false,
      showType: false,
      form: {
        cameraName: '',
        areaId: '',
        brandId: '',
        cameraIp: '',
        account: '',
        password: '',
        sort: '',
        roomId: '',
      },
      rules: {
        cameraName: [ { required: true, message: '摄像头名称不能为空', trigger: 'blur' } ],
        areaId: [ { required: true, message: '区域不能为空', trigger: 'change' } ],
        brandId: [ { required: true, message: '品牌不能为空', trigger: 'change' } ],
        cameraIp: [ { required: true, message: 'ip地址不能为空', trigger: 'blur' } ],
        account: [ { required: true, message: '用户名不能为空', trigger: 'blur' } ],
        password: [ { required: true, message: '密码不能为空', trigger: 'blur' } ],
        sort:  [ { required: true, message: '请输入排序', trigger: 'blur' } ],
      },
      selectList: [],
      cameraOne: '',
      cameraTwo: '',
      cameraTitle: '',
      isVideo: false,
      last: '',
      next: '',
    }
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum= val;
      this.init();
    },
    init() {
      let params = {
        current: this.pageNum,
        size: this.pageSize,
        areaId: this.areaId,
        brandId: this.brandId,
        strchStr: this.keyWord,
        // sort: this.sort
      }
      videoList(params).then(res => {
        if(res.code === 10000) {
          this.videoLists = res.data.records;
          this.total = res.data.total;
        }
      })
    },
    handleQuery(data) {
      this.areaId = data.areaId ? data.areaId : '';
      this.keyWord = data.keyWord ? data.keyWord : '';
      this.brandId = data.brandId ? data.brandId : '';
      this.sort = data.sort;
      this.pageNum = 1;
      this.init();
    },
    // 获取区域，摄像头品牌
    getArea() {
      let params = {
        current: 1,
        size: 100,
        areaName: ''
      }
      areaList(params).then(res => {
        if(res.code === 10000) {
          res.data.records.forEach(item => {
            this.searchList[0].options.push({label: item.areaName, value: item.id})
          })
        }
      })
      let params1 = {
        current: 1,
        size: 100,
        brandName: ''
      }
      brandList(params1).then(res => {
        if(res.code === 10000) {
          res.data.records.forEach(item => {
            this.searchList[1].options.push({label: item.brandName, value: item.id})
          })
        }
      })
    },
    // 是否启用
    onSwitch(row) {
      let params = {
        id: row.id
      }
      videoSwitch(params).then(res => {
        if(res.code === 10000) {
          this.$message.success(res.message);
        } else {
          this.$message.error('失败');
        }
      })
    },
    // 批量选择
    selectionChange(rows) {
      this.selectList = rows;
    },
    add() {
      this.showType = false;
      this.dialogVisible = true;
    },
    // 编辑
    edit(row) {
      this.showType = true;
      this.dialogVisible = true;
      this.form.id = row.id;
      this.form.cameraName = row.cameraName;
      this.form.areaId = row.areaId;
      this.form.brandId = row.brandId;
      this.form.cameraIp = row.cameraIp;
      this.form.account = row.account;
      this.form.password = row.password;
      this.form.roomId = row.roomId;
      // this.form.sort = row.sort;
    },
    // 单个删除
    del(row) {
      let params = {
        ids: row.id
      }
      delVideo(params).then(res => {
        if(res.code === 10000) {
          this.init()
          this.$message.success(res.message)
        } else {
          this.$message('删除失败')
        }
      })
    },
    // 批量删除
    delAll() {
      if(this.selectList.length > 0) {
        this.$confirm('此操作将永久删除这些品牌，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = arrToIds(this.selectList);
          let params = {
            ids: ids
          }
          delVideo(params).then(res => {
            if(res.code === 10000) {
              this.init();
              this.$message.success(res.message)
            } else {
              this.$message.error('删除失败')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
        // delArea()
      } else {
        this.$message.error('请勾选需要删除的区域');
        return;
      }
    },
    // 查看摄像头
    open(row) {
      if(row.runStatus) {
        let params = {
          cameraIds: [row.id],
          strchStr: this.keyWord,
          areaId: this.areaId,
          brandId: this.brandId,
          // sort: this.sort
        }
       getVideo(params).then(res => {
         if(res.code === 10000) {
           this.isVideo = true;
           // this.cameraTitle = res.data[0].cameraName;
           this.cameraOne = res.data[0].wsUrl;
           this.cameraTwo = res.data[0].rtspUrl;
           this.last = res.data[0].lastId;
           this.next = res.data[0].nextId;
         } else {
           this.$message.error(res.message);
         }
       })
      } else {
        this.$message.error('该摄像头未启用');
      }
    },
    // 新增、编辑
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.showType) {
            // // 编辑
            let params = {
              id: this.form.id,
              cameraName: this.form.cameraName,
              areaId: this.form.areaId,
              brandId: this.form.brandId,
              cameraIp: this.form.cameraIp,
              account: this.form.account,
              password: this.form.password,
              roomId: this.form.roomId,
              // sort: this.form.sort
            }
            editVideo(params).then(res => {
              this.dialogVisible = false;
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
            })

          } else {
            // 新增
            let params = {
              cameraName: this.form.cameraName,
              areaId: this.form.areaId,
              brandId: this.form.brandId,
              cameraIp: this.form.cameraIp,
              account: this.form.account,
              password: this.form.password,
              roomId: this.form.roomId,
              // sort: this.form.sort
            }
            addVideo(params).then(res => {
              this.dialogVisible = false;
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 重置
    reset() {
      this.form = {
        cameraName: '',
        areaId: '',
        brandId: '',
        cameraIp: '',
        account: '',
        password: '',
        roomId: '',
      }
    },
    // 上一个下一个
    getNext(id) {
      let params = {
        cameraIds: [id],
        strchStr: this.keyWord,
        areaId: this.areaId,
        brandId: this.brandId,
        sort: this.sort
      }
      getVideo(params).then(res => {
        if(res.code === 10000) {
          this.isVideo = true;
          this.cameraTitle = res.data[0].cameraName;
          this.cameraOne = res.data[0].wsUrl;
          this.cameraTwo = res.data[0].rtspUrl;
          this.last = res.data[0].lastId;
          this.next = res.data[0].nextId;
        } else {
          this.$message.error(res.message);
        }
      })
    }
  },
  mounted() {
    this.getArea()
    this.init()
  }
}
</script>

<style scoped>
  .videoAdmin {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
</style>