goldenPig/src/views/Video/VideoLook.vue

<template>
  <div>
    <new-table
        :height="600"
        :title="title"
        :listData="videoLists"
        :tableItems="tableItems"
        :shows="tableShows"
    >
      <template #right>
        <el-button
            size="mini"
            type="primary"
            style="margin-right: 10px"
            @click="add"
        >添加监控</el-button>
      </template>
      <template #type="scope">
       <span>{{getType(scope.row.type)}}</span>
      </template>
      <template #handler="scope">
        <el-button
            size="mini"
            style="margin-right: 10px"
            @click="edit(scope.row)"
        >编辑</el-button
        >
        <el-popconfirm
            title=" 确定要删除这个区域吗？"
            @confirm="del(scope.row)"
        >
          <el-button
              type="danger"
              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>
    <!-- 新增编辑   -->
    <el-dialog
        :title="showType ? '编 辑' : '新 增'"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <div>
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="120px"
            size="mini"
        >
          <el-form-item label="大屏所属位置" prop="type">
            <el-select v-model="form.type">
              <el-option v-for="item in typeList" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择监控" prop="selectVideo">
            <el-cascader
                v-model="selectVideo"
                :options="options"
                size="mini"
                @change="handleChange"
                :props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover', disabled: 'runStatus'}"
                :show-all-levels="false"></el-cascader>
          </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-dialog>
  </div>
</template>

<script>
import NewTable from "../../components/newTable/NewTable";
import {getVideoAll, baseVideoAdd, baseVideoList, baseVideoDel, baseVideoEdit, getVideo} from "../../utils/api";
export default {
  name: "VideoLook",
  components: {
    NewTable
  },
  data() {
    return {
      title: '视频列表',
      tableItems: [
        {
          prop: "id",
          label: "ID",
          minWidth: "50",
          slotName: "id",
        },
        {
          prop: "videoName",
          label: "摄像头名称",
          minWidth: "100",
          slotName: "videoName",
        },
        {
          label: "所属大屏位置",
          minWidth: "100",
          slotName: "type",
        },
        {
          label: "操作",
          minWidth: "150",
          slotName: "handler",
        },
      ],
      tableShows: {
        showIndex: false,
        showSelect: false,
      },
      videoLists: [],
      typeList: [
        {
          id: 1,
          name: '门卫管控'
        },
        {
          id: 2,
          name: '环境监测'
        }
      ],
      showType: false,
      dialogVisible: false,
      form: {
        videoId: '',
        type: ''
      },
      options: [],
      selectVideo: [],
      rules: {
        type: [{ required: true, message: '请选择位置', trigger: 'change' }],
      },
      cameraTitle: '',
      isVideo: false,
      cameraOne: '',
      cameraTwo: '',
    }
  },
  methods: {
    init() {
      baseVideoList({}).then(res => {
        if(res.code === 10000) {
          this.videoLists = res.data;
        }
      })
    },
    initVideo() {
      getVideoAll({}).then(res => {
        if(res.code === 10000) {
          res.data.forEach(item => {
            item.cameraList.forEach(items => {
              items.runStatus = !items.runStatus
            })
          })
          this.options = res.data;
        }
      })
    },
    getType(val) {
      let str = '';
      this.typeList.forEach(item => {
        if(item.id === val) {
          str = item.name
        }
      })
      return str
    },
    add() {
      this.dialogVisible = true;
      this.showType = false;
    },
    edit(row) {
      this.dialogVisible = true;
      this.showType = true;
      this.form.id = row.id;
      this.form.type = row.type;
      this.form.videoId = row.videoId;
      let arr = row.selectVideo.split(',');
      this.selectVideo = arr.map(Number);
    },
    del(val) {
      let params = {
        id: val.id
      }
      baseVideoDel(params).then(res => {
        if(res.code === 10000) {
          this.init()
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      })
    },
    open(row) {
      let params = {
        cameraIds: [row.videoId]
      }
      getVideo(params).then(res => {
        this.isVideo = true;
        this.cameraOne = res.data[0].wsUrl;
        this.cameraTwo = res.data[0].rtspUrl;
      })
    },
    handleChange(value) {
       this.form.videoId = value[value.length - 1];
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.showType) {
            let params = {
              id: this.form.id,
              videoId: this.form.videoId,
              type: this.form.type,
              selectVideo: this.selectVideo.join(',')
            }
            baseVideoEdit(params).then(res => {
              if(res.code === 10000) {
                this.init()
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message);
              }
              this.dialogVisible = false;
            })
          } else {
            let params = {
              videoId: this.form.videoId,
              type: this.form.type,
              selectVideo: this.selectVideo.join(',')
            }
            baseVideoAdd(params).then(res => {
              if(res.code === 10000) {
                this.init()
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message);
              }
              this.dialogVisible = false;
            })
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.initVideo();
    this.init();
  }
}
</script>

<style scoped>

</style>