|
|
@@ -1,262 +1,24 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
- <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
- <el-form-item label="摄像头名称" prop="cname">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.cname"
|
|
|
- placeholder="请输入摄像头名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="访问地址" prop="caddr">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.caddr"
|
|
|
- placeholder="请输入访问地址"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="cstatus">
|
|
|
- <el-select v-model="queryParams.cstatus" placeholder="请选择状态" clearable size="small">
|
|
|
- <el-option label="请选择字典生成" value="" />
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="创建时间" prop="createtime">
|
|
|
- <el-date-picker clearable size="small"
|
|
|
- v-model="queryParams.createtime"
|
|
|
- type="date"
|
|
|
- value-format="yyyy-MM-dd"
|
|
|
- placeholder="选择创建时间">
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="单位id" prop="unitid">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.unitid"
|
|
|
- placeholder="请输入单位id"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="单位名称" prop="unitname">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.unitname"
|
|
|
- placeholder="请输入单位名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="存入菜单ID" prop="powerArea">
|
|
|
- <el-input
|
|
|
- v-model="queryParams.powerArea"
|
|
|
- placeholder="请输入存入菜单ID"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form> -->
|
|
|
-
|
|
|
- <!-- <el-row :gutter="10" class="mb8">
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- icon="el-icon-plus"
|
|
|
- size="mini"
|
|
|
- @click="handleAdd"
|
|
|
- v-hasPermi="['monitoring:camera:add']"
|
|
|
- >新增</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="success"
|
|
|
- plain
|
|
|
- icon="el-icon-edit"
|
|
|
- size="mini"
|
|
|
- :disabled="single"
|
|
|
- @click="handleUpdate"
|
|
|
- v-hasPermi="['monitoring:camera:edit']"
|
|
|
- >修改</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="danger"
|
|
|
- plain
|
|
|
- icon="el-icon-delete"
|
|
|
- size="mini"
|
|
|
- :disabled="multiple"
|
|
|
- @click="handleDelete"
|
|
|
- v-hasPermi="['monitoring:camera:remove']"
|
|
|
- >删除</el-button>
|
|
|
- </el-col>
|
|
|
- <el-col :span="1.5">
|
|
|
- <el-button
|
|
|
- type="warning"
|
|
|
- plain
|
|
|
- icon="el-icon-download"
|
|
|
- size="mini"
|
|
|
- :loading="exportLoading"
|
|
|
- @click="handleExport"
|
|
|
- v-hasPermi="['monitoring:camera:export']"
|
|
|
- >导出</el-button>
|
|
|
- </el-col>
|
|
|
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
- </el-row> -->
|
|
|
- <!--
|
|
|
- <el-table v-loading="loading" :data="cameraList" @selection-change="handleSelectionChange">
|
|
|
- <el-table-column type="selection" width="55" align="center" />
|
|
|
- <el-table-column label="存入菜单ID" align="center" prop="id" />
|
|
|
- <el-table-column label="摄像头名称" align="center" prop="cname" />
|
|
|
- <el-table-column label="访问地址" align="center" prop="caddr" />
|
|
|
- <el-table-column label="状态" align="center" prop="cstatus" />
|
|
|
- <el-table-column label="创建时间" align="center" prop="createtime" width="180">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span>{{ parseTime(scope.row.createtime, '{y}-{m}-{d}') }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="单位id" align="center" prop="unitid" />
|
|
|
- <el-table-column label="单位名称" align="center" prop="unitname" />
|
|
|
- <el-table-column label="存入菜单ID" align="center" prop="powerArea" />
|
|
|
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-edit"
|
|
|
- @click="handleUpdate(scope.row)"
|
|
|
- v-hasPermi="['monitoring:camera:edit']"
|
|
|
- >修改</el-button>
|
|
|
- <el-button
|
|
|
- size="mini"
|
|
|
- type="text"
|
|
|
- icon="el-icon-delete"
|
|
|
- @click="handleDelete(scope.row)"
|
|
|
- v-hasPermi="['monitoring:camera:remove']"
|
|
|
- >删除</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table> -->
|
|
|
-
|
|
|
- <!-- <pagination
|
|
|
- v-show="total>0"
|
|
|
- :total="total"
|
|
|
- :page.sync="queryParams.pageNum"
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="getList"
|
|
|
- /> -->
|
|
|
-
|
|
|
- <!-- 添加或修改安防监控对话框 -->
|
|
|
- <el-dialog
|
|
|
- :title="title"
|
|
|
- :visible.sync="open"
|
|
|
- width="800px"
|
|
|
- append-to-body
|
|
|
- :close-on-click-modal="false"
|
|
|
- >
|
|
|
- <el-form
|
|
|
- ref="form"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- label-width="100px"
|
|
|
- :inline="true"
|
|
|
- >
|
|
|
- <el-form-item label="摄像头名称" prop="cname">
|
|
|
- <el-input v-model="form.cname" placeholder="请输入摄像头名称" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="访问地址" prop="caddr">
|
|
|
- <el-input v-model="form.caddr" placeholder="请输入访问地址" />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <!-- <el-form-item label="单位id" prop="unitid">
|
|
|
- <el-input v-model="form.unitid" placeholder="请输入单位id" />
|
|
|
- </el-form-item> -->
|
|
|
- <el-form-item label="单位名称" prop="unitname">
|
|
|
- <!-- <el-input v-model="form.unitname" placeholder="请输入单位名称" /> -->
|
|
|
- <treeselect
|
|
|
- v-model="form.unitid"
|
|
|
- :options="users"
|
|
|
- placeholder="请选择单位"
|
|
|
- class="threeselects"
|
|
|
- @select="selectPeo"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="cstatus">
|
|
|
- <!-- <el-radio-group v-model="form.cstatus">
|
|
|
- <el-radio label="1">请选择字典生成</el-radio>
|
|
|
-
|
|
|
- </el-radio-group> -->
|
|
|
- <el-switch
|
|
|
- v-model="form.cstatus"
|
|
|
- active-color="#13ce66"
|
|
|
- inactive-color="#ccc"
|
|
|
- active-value="1"
|
|
|
- inactive-value="0"
|
|
|
- >
|
|
|
- </el-switch>
|
|
|
- <span class="greed" v-if="form.cstatus == '1'"></span>
|
|
|
- <span class="CCC" v-if="form.cstatus == '0'"></span>
|
|
|
- </el-form-item>
|
|
|
- <!-- <el-form-item label="存入菜单ID" prop="powerArea">
|
|
|
- <el-input v-model="form.powerArea" placeholder="请输入存入菜单ID" />
|
|
|
- </el-form-item> -->
|
|
|
- </el-form>
|
|
|
- <div slot="footer" class="dialog-footer">
|
|
|
- <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
- <el-button @click="cancel">取 消</el-button>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
- <!-- 视频播放窗口 -->
|
|
|
-
|
|
|
+ <div>
|
|
|
<el-row>
|
|
|
- <el-col :span="1.5">
|
|
|
- <!-- <el-button
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- icon="el-icon-plus"
|
|
|
- size="mini"
|
|
|
- @click="handleAdd"
|
|
|
- v-hasPermi="['monitoring:camera:add']"
|
|
|
- >新增</el-button
|
|
|
- > -->
|
|
|
- </el-col>
|
|
|
+ <el-col :span="1.5"> </el-col>
|
|
|
<el-col :span="1.5" class="isSubmit">
|
|
|
- <!-- <el-radio-group v-model="queryParams.type" @change="caoZuoTypefun"> -->
|
|
|
<button
|
|
|
- @click="one"
|
|
|
+ @click="faith_one"
|
|
|
id="onevideos"
|
|
|
class="single"
|
|
|
- :class="this.btn == 0 ? 'bg' : ''"
|
|
|
+ :class="!this.isfour ? 'bg' : ''"
|
|
|
>
|
|
|
单屏
|
|
|
</button>
|
|
|
- <!-- <button
|
|
|
-
|
|
|
- class="singles"
|
|
|
- :class="this.btn == 1 ? 'bg' : ''"
|
|
|
- >
|
|
|
- 四分屏
|
|
|
- </button> -->
|
|
|
- <!-- <el-radio-button label="2">九分屏</el-radio-button> -->
|
|
|
- <!-- <el-radio-button label="3" class="allFlv1">十六分屏</el-radio-button> -->
|
|
|
<button
|
|
|
- @click="four"
|
|
|
+ @click="faith_four"
|
|
|
id="allvideos"
|
|
|
class="allFlv"
|
|
|
- :class="this.btn == 1 ? 'bg' : ''"
|
|
|
+ :class="this.isfour ? 'bg' : ''"
|
|
|
>
|
|
|
全通道FLV
|
|
|
</button>
|
|
|
- <!-- <el-radio-button label="5" class="fullscreen">全屏</el-radio-button> -->
|
|
|
- <!-- </el-radio-group> -->
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<hr />
|
|
|
@@ -271,26 +33,13 @@
|
|
|
摄像头
|
|
|
</div>
|
|
|
<div class="tree">
|
|
|
- <!-- <el-tree
|
|
|
- class="userAgrees"
|
|
|
- style="height: calc(100vh - 240px); overflow: auto"
|
|
|
- :data="rtsplist"
|
|
|
- :props="defaultProps"
|
|
|
- @node-click="clickhandleitem(item,index)"
|
|
|
- default-expand-all
|
|
|
- highlight-current
|
|
|
- :expand-on-click-node="false"
|
|
|
- ></el-tree> -->
|
|
|
<!-- 左侧 -->
|
|
|
<div class="videolist">
|
|
|
<div class="userAgrees">
|
|
|
- <ul
|
|
|
- style="height: calc(100vh - 240px); overflow: auto"
|
|
|
- v-if="this.as == true"
|
|
|
- >
|
|
|
+ <ul style="height: calc(100vh - 240px); overflow: auto">
|
|
|
<li
|
|
|
style="margin-left: -40px; padding-left: 40px"
|
|
|
- v-for="(item, index) in cameraList"
|
|
|
+ v-for="(item, index) in fourVideo"
|
|
|
:key="item.id"
|
|
|
@click="clickhandleitem(item, index)"
|
|
|
>
|
|
|
@@ -298,20 +47,14 @@
|
|
|
{{ item.cname }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <!-- <div id="aa">
|
|
|
- {{cameraList.query}}
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <!-- </el-row> -->
|
|
|
<el-col :span="19" :xs="24">
|
|
|
<!-- 单屏播放 -->
|
|
|
- <div style="position: relative" v-if="this.btn == 0">
|
|
|
+ <div style="position: relative" v-if="!isfour">
|
|
|
<div
|
|
|
- v-for="(i, index) in 1"
|
|
|
- :key="index"
|
|
|
style="
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 200px);
|
|
|
@@ -320,548 +63,91 @@
|
|
|
position: relative;
|
|
|
"
|
|
|
>
|
|
|
- <!-- <button
|
|
|
- style="position: absolute; left: 5px; z-index: 999"
|
|
|
- class="choose"
|
|
|
- @click="chooselu"
|
|
|
- >
|
|
|
- 选择通道
|
|
|
- </button> -->
|
|
|
- <!-- :id="'videoElement' + i" -->
|
|
|
- <video
|
|
|
- autoplay
|
|
|
- controls
|
|
|
- style="
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin-left: 5px;
|
|
|
- margin-bottom: 5px;
|
|
|
- position: relative;
|
|
|
- "
|
|
|
- id="singleplay"
|
|
|
- ></video>
|
|
|
+ <flv id="faith" :url="onevideoUrl.caddr" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 四屏播放 -->
|
|
|
<!-- <keep-alive> -->
|
|
|
- <div class="video1" v-if="this.btn == 1 && this.dan == false">
|
|
|
- <div
|
|
|
- v-for="(i, index) in this.fourvideo"
|
|
|
- :key="index"
|
|
|
- class="fourscreen"
|
|
|
- >
|
|
|
- <video
|
|
|
- autoplay
|
|
|
- controls
|
|
|
- style="
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- margin-left: 5px;
|
|
|
- margin-bottom: 5px;
|
|
|
- position: relative;
|
|
|
- "
|
|
|
- :id="'singleplay' + index"
|
|
|
- ></video>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="video1" v-if="this.btn == 1 && this.dan == true">
|
|
|
- <div v-for="(i, index) in 1" :key="index" class="fullscreen">
|
|
|
- <video
|
|
|
- autoplay
|
|
|
- controls
|
|
|
- style="width: 100%; height: 100%; position: relative"
|
|
|
- :id="'singleplay' + index"
|
|
|
- ></video>
|
|
|
+ <div class="video1" v-else>
|
|
|
+ <div v-for="(item, index) in arr" :key="index" class="fourscreen">
|
|
|
+ <flv :id="index" :url="arr[index].caddr" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
+
|
|
|
+ <!-- <div v-else v-for="(item, index) in fourVideo" :key="index">
|
|
|
+ <flv :id="index" :url="item.caddr"/>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Treeselect from "@riophae/vue-treeselect";
|
|
|
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
-import { getDept2 } from "@/api/grassrootsregistration/bdglmeeting";
|
|
|
-import flvjs from "flv.js";
|
|
|
-import {
|
|
|
- listCamera,
|
|
|
- getCamera,
|
|
|
- delCamera,
|
|
|
- addCamera,
|
|
|
- updateCamera,
|
|
|
- exportCamera,
|
|
|
-} from "@/api/monitoring/camera";
|
|
|
+import { listCamera } from "@/api/monitoring/camera";
|
|
|
export default {
|
|
|
- name: "Camera",
|
|
|
- components: {
|
|
|
- Treeselect,
|
|
|
- },
|
|
|
+ name: "Stui",
|
|
|
data() {
|
|
|
return {
|
|
|
- // 树形配置
|
|
|
- defaultProps: {
|
|
|
- children: "children",
|
|
|
- label: "rtsp",
|
|
|
- },
|
|
|
- // 遮罩层
|
|
|
- loading: true,
|
|
|
- // 导出遮罩层
|
|
|
- exportLoading: false,
|
|
|
- // 选中数组
|
|
|
- ids: [],
|
|
|
- // 非单个禁用
|
|
|
- single: true,
|
|
|
- // 非多个禁用
|
|
|
- multiple: true,
|
|
|
- // 显示搜索条件
|
|
|
- showSearch: true,
|
|
|
- // 总条数
|
|
|
- total: 0,
|
|
|
- // 安防监控表格数据
|
|
|
- cameraList: [],
|
|
|
- // 弹出层标题
|
|
|
- title: "",
|
|
|
- // 是否显示弹出层
|
|
|
- open: false,
|
|
|
- // 查询参数
|
|
|
- queryParams: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 20,
|
|
|
- cname: null,
|
|
|
- caddr: null,
|
|
|
- cstatus: null,
|
|
|
- createtime: null,
|
|
|
- unitid: null,
|
|
|
- unitname: null,
|
|
|
- powerArea: null,
|
|
|
- },
|
|
|
- // 表单参数
|
|
|
- form: {},
|
|
|
- // 表单校验
|
|
|
- rules: {},
|
|
|
- rtsplist: [
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream0.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream1.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream0.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream1.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream0.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream1.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream1.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
- {
|
|
|
- rtsp: "http://192.168.5.187/hdl/live/stream1.flv",
|
|
|
- player: null,
|
|
|
- },
|
|
|
- ],
|
|
|
- // 单视频
|
|
|
- flvPlayer1: null,
|
|
|
- flvPlayer: null,
|
|
|
- inputvalue: "",
|
|
|
- devicename: "60",
|
|
|
- url: "",
|
|
|
- list: [],
|
|
|
- count: 1, // 当前点击标识
|
|
|
- flvPlayerList: [],
|
|
|
- datalist: [],
|
|
|
- screen: 1,
|
|
|
- // 单个视频播放
|
|
|
- url1: "http://192.168.5.187/hdl/live/stream0.flv",
|
|
|
- // 获取单位
|
|
|
- users: [],
|
|
|
- flvPlayerList1: [],
|
|
|
- fourvideo: 4,
|
|
|
- videourl: [
|
|
|
- "http://192.168.5.187/hdl/live/stream0.flv",
|
|
|
- "http://192.168.5.187/hdl/live/stream1.flv",
|
|
|
- "http://192.168.5.187/hdl/live/stream0.flv",
|
|
|
- "http://192.168.5.187/hdl/live/stream1.flv",
|
|
|
- ],
|
|
|
- btn: 0,
|
|
|
- clickindex: "",
|
|
|
- sixvideo: 6,
|
|
|
- dan: false,
|
|
|
- as: true,
|
|
|
- belongLocal: "",
|
|
|
- ad: 0,
|
|
|
+ isfour: false,
|
|
|
+ onevideoUrl: null,
|
|
|
+ fourVideo: [],
|
|
|
+ faith: 0,
|
|
|
+ arr:[]
|
|
|
};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- listCamera(this.queryParams).then((response) => {
|
|
|
- this.url1 = response.rows[0].caddr;
|
|
|
- });
|
|
|
- // 单个视频播放
|
|
|
- // this.singleplayvideo();
|
|
|
- this.oneVideo();
|
|
|
- // 点击
|
|
|
- this.$bus.$on("Click", (cameraList) => {
|
|
|
- listCamera({ belongLocal: cameraList.query }).then((response) => {
|
|
|
- this.cameraList = response.rows;
|
|
|
- this.ad = 1;
|
|
|
- this.getList(cameraList.query);
|
|
|
- });
|
|
|
- });
|
|
|
- },
|
|
|
created() {
|
|
|
- this.queryParams.type = 0;
|
|
|
- // debugger
|
|
|
- this.aa();
|
|
|
- // 获取执行单位列表
|
|
|
- getDept2().then((res) => {
|
|
|
- this.users = res.data;
|
|
|
- });
|
|
|
+ this.jiekou();
|
|
|
},
|
|
|
methods: {
|
|
|
- // 调用List接口
|
|
|
- aa() {
|
|
|
- if (this.$route.path == "/monitoring/camera") {
|
|
|
- this.getList(1);
|
|
|
- } else {
|
|
|
- var index = this.$route.path.lastIndexOf("/");
|
|
|
- let str = this.$route.path.substring(
|
|
|
- index + 1,
|
|
|
- this.$route.path.length
|
|
|
- );
|
|
|
-
|
|
|
- // const a = this.$route.path.substring(this.$route.path.lastIndexOf("/"));
|
|
|
- this.getList(str);
|
|
|
- }
|
|
|
- },
|
|
|
- // 初始化视频
|
|
|
- singleplayvideo(name, url, num) {
|
|
|
- if (flvjs.isSupported()) {
|
|
|
- // debugger;
|
|
|
- name = flvjs.createPlayer(
|
|
|
- {
|
|
|
- type: "flv",
|
|
|
- url: url, //你的url地址
|
|
|
- },
|
|
|
- {
|
|
|
- enableWorker: false, //不启用分离线程
|
|
|
- enableStashBuffer: false, //关闭IO隐藏缓冲区
|
|
|
- reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
|
|
|
- autoCleanupSourceBuffer: true, //自动清除缓存
|
|
|
- fixAudioTimestampGap: false,
|
|
|
- }
|
|
|
- );
|
|
|
- this.$nextTick(() => {
|
|
|
- // 可以使用回调函数的写法
|
|
|
- // 这个函数中DOM必定渲染完成
|
|
|
- let videoElement1 = document.getElementById("singleplay" + num);
|
|
|
- // debugger;
|
|
|
- name.attachMediaElement(videoElement1);
|
|
|
- // name.load();
|
|
|
- // name.play();
|
|
|
- if (url !== "" && url !== null) {
|
|
|
- name.load();
|
|
|
- name.play();
|
|
|
- }
|
|
|
- //定时方法是为了用户离开页面视频是实时播放的,暂停按钮无用
|
|
|
- setInterval(function () {
|
|
|
- if (videoElement1.buffered.length > 0) {
|
|
|
- const end = videoElement1.buffered.end(0); // 视频结尾时间
|
|
|
- const current = videoElement1.currentTime; // 视频当前时间
|
|
|
- const diff = end - current; // 相差时间
|
|
|
-
|
|
|
- const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
|
|
|
- const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
|
|
|
- const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
|
|
|
- let playbackRate = 1.0; // 播放速度
|
|
|
- if (diff > diffCritical) {
|
|
|
- // this.flvPlayer.load();
|
|
|
- // console.log("相差超过4秒，进行跳转");
|
|
|
- videoElement1.currentTime = end - 1.5;
|
|
|
- playbackRate = Math.max(1, Math.min(diffCritical, 16));
|
|
|
- } else if (diff > diffSpeedUp) {
|
|
|
- // console.log("相差超过1秒，进行加速");
|
|
|
- playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
|
|
|
- }
|
|
|
- videoElement1.playbackRate = playbackRate;
|
|
|
- if (videoElement1.paused) {
|
|
|
- setTimeout(() => {
|
|
|
- videoElement1.play();
|
|
|
- }, 10);
|
|
|
- }
|
|
|
- }
|
|
|
- }, 1000);
|
|
|
-
|
|
|
- name.on(flvjs.Events.ERROR, (errType, errDetail) => {
|
|
|
- // alert("网络波动,正在尝试连接中...");
|
|
|
- if (name) {
|
|
|
- this.reloadVideo(name);
|
|
|
- }
|
|
|
- });
|
|
|
- this.flvPlayerList1.push(name);
|
|
|
- });
|
|
|
- }
|
|
|
- // this.destoryVideo(this.flvPlayerList1[0])
|
|
|
+ faith_one() {
|
|
|
+ this.isfour = false;
|
|
|
},
|
|
|
- // 单视屏
|
|
|
- oneVideo() {
|
|
|
- this.singleplayvideo("flvPlayer1", this.url1, "");
|
|
|
+ faith_four() {
|
|
|
+ this.isfour = true;
|
|
|
},
|
|
|
- // 单分屏点击事件。
|
|
|
- // 单分屏点击事件。
|
|
|
- clickhandleitem(data, index) {
|
|
|
- if (this.btn == 0) {
|
|
|
- for (var j of this.flvPlayerList1) {
|
|
|
- this.destoryVideo(this.flvPlayerList1[0]);
|
|
|
- this.flvPlayerList1.shift();
|
|
|
- }
|
|
|
-
|
|
|
- this.url1 = this.cameraList[index].caddr;
|
|
|
- this.singleplayvideo("flvPlayer1", this.url1, "");
|
|
|
- } else if (this.btn == 1) {
|
|
|
- for (var j of this.flvPlayerList1) {
|
|
|
- this.destoryVideo(this.flvPlayerList1[0]);
|
|
|
- this.flvPlayerList1.shift();
|
|
|
+ jiekou() {
|
|
|
+ var index = this.$route.path.split("/")[2];
|
|
|
+ listCamera({ belongLocal: index }).then((response) => {
|
|
|
+ this.fourVideo = response.rows;
|
|
|
+ if (this.fourVideo.length >= 4) {
|
|
|
+ this.fourVideo.forEach((item,i)=>{
|
|
|
+ if (i <= 3){
|
|
|
+ this.arr.push(item)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ this.fourVideo.forEach((item,i)=>{
|
|
|
+ if (i <= 3){
|
|
|
+ this.arr.push(item)
|
|
|
+ }
|
|
|
+ });
|
|
|
}
|
|
|
- this.fourvideo = 1;
|
|
|
- this.clickindex = index;
|
|
|
- for (var i of this.flvPlayerList1) {
|
|
|
- this.destoryVideo(this.flvPlayerList1[0]);
|
|
|
- this.flvPlayerList1.shift();
|
|
|
+ if (
|
|
|
+ response.rows != undefined ||
|
|
|
+ response.rows != null ||
|
|
|
+ response.rows != "" ||
|
|
|
+ response.rows != response.rows.lenght > 0
|
|
|
+ ) {
|
|
|
+ this.onevideoUrl = [...response.rows][0];
|
|
|
}
|
|
|
- // if (this.flvPlayerList1.length > 3) {
|
|
|
- // this.destoryVideo(this.flvPlayerList1[0]);
|
|
|
- // this.flvPlayerList1.shift();
|
|
|
- // }
|
|
|
- this.url1 = this.cameraList[index].caddr;
|
|
|
- this.dan = true;
|
|
|
- this.singleplayvideo("flvPlayer1", this.url1, 0);
|
|
|
- }
|
|
|
- },
|
|
|
- // 播放
|
|
|
- play(flvPlayer) {
|
|
|
- flvPlayer.play();
|
|
|
- },
|
|
|
- // 单分屏播放
|
|
|
- one() {
|
|
|
- this.btn = 0;
|
|
|
- $("#allvideos").removeAttr("disabled");
|
|
|
- $("#onevideos").attr({ disabled: "disabled" });
|
|
|
- for (var i of this.flvPlayerList1) {
|
|
|
- this.destoryVideo(this.flvPlayerList1[0]);
|
|
|
- this.flvPlayerList1.shift();
|
|
|
- }
|
|
|
- this.oneVideo();
|
|
|
+ });
|
|
|
},
|
|
|
- // 四分屏播放
|
|
|
- four() {
|
|
|
- this.fourvideo = 4;
|
|
|
- this.btn = 1;
|
|
|
- this.dan = false;
|
|
|
- $("#allvideos").attr({ disabled: "disabled" });
|
|
|
- $("#onevideos").removeAttr("disabled");
|
|
|
-
|
|
|
- for (var i of this.flvPlayerList1) {
|
|
|
- this.destoryVideo(this.flvPlayerList1[0]);
|
|
|
- this.flvPlayerList1.shift();
|
|
|
- }
|
|
|
-
|
|
|
- if (this.cameraList.length < this.fourvideo) {
|
|
|
- for (var i = 0; i < this.cameraList.length; i++) {
|
|
|
- this.url1 = this.cameraList[i].caddr;
|
|
|
|
|
|
- // 报错原因是这个地址没有视频
|
|
|
- // console.log(this.url1);
|
|
|
- this.singleplayvideo("flvPlayer" + i, this.url1, i);
|
|
|
- }
|
|
|
+ // 单分屏点击事件。
|
|
|
+ clickhandleitem(data, index) {
|
|
|
+ if (!this.isfour) {
|
|
|
+ this.onevideoUrl = [...this.fourVideo][index];
|
|
|
} else {
|
|
|
- for (var i = 0; i < this.fourvideo; i++) {
|
|
|
- this.url1 = this.cameraList[i].caddr;
|
|
|
- // 报错原因是这个地址没有视频
|
|
|
- // console.log(this.url1);
|
|
|
- this.singleplayvideo("flvPlayer" + i, this.url1, i);
|
|
|
+ this.arr[this.faith].caddr = this.fourVideo[index].caddr
|
|
|
+ this.faith += 1
|
|
|
+ if (this.faith == 4){
|
|
|
+ this.faith = 0
|
|
|
+ var index = this.$route.path.split("/")[2];
|
|
|
+ listCamera({ belongLocal: index }).then((response) => {
|
|
|
+ this.fourVideo = response.rows;})
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- /** 查询安防监控列表 */
|
|
|
- getList(a) {
|
|
|
- // debugger
|
|
|
- this.loading = true;
|
|
|
- listCamera({ belongLocal: a }).then((response) => {
|
|
|
- this.cameraList = response.rows;
|
|
|
- this.url1 = this.cameraList[0].caddr;
|
|
|
-
|
|
|
- this.total = response.total;
|
|
|
- this.loading = false;
|
|
|
- // this.queryParams.type==""
|
|
|
- });
|
|
|
- },
|
|
|
- // 操作类型
|
|
|
- caoZuoTypefun() {
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- reloadVideo(flvPlayer) {
|
|
|
- this.destoryVideo(flvPlayer);
|
|
|
- try {
|
|
|
- this.createVideo();
|
|
|
- } finally {
|
|
|
- this.algain();
|
|
|
- }
|
|
|
- },
|
|
|
- algain() {
|
|
|
- if (this.createVideo() !== error) {
|
|
|
- return;
|
|
|
- } else {
|
|
|
- try {
|
|
|
- this.createVideo();
|
|
|
- } catch (e) {}
|
|
|
- }
|
|
|
- },
|
|
|
- // 全通道
|
|
|
- // all() {
|
|
|
- // this.sixvideo = 6;
|
|
|
- // this.btn = 1;
|
|
|
- // this.dan=false
|
|
|
- // for (var i of this.flvPlayerList1) {
|
|
|
- // this.destoryVideo(this.flvPlayerList1[0]);
|
|
|
- // this.flvPlayerList1.shift();
|
|
|
- // }
|
|
|
- //
|
|
|
- // for (var i = 0; i < this.sixvideo; i++) {
|
|
|
- // this.url1 = this.cameraList[i].caddr;
|
|
|
- // this.singleplayvideo("flvPlayer" + i, this.url1, i);
|
|
|
- // }
|
|
|
- // },
|
|
|
- // reloadVideo(flvPlayer) {
|
|
|
- // this.destoryVideo(flvPlayer);
|
|
|
- // this.createVideo();
|
|
|
- // // this.singleplayvideo();
|
|
|
- // },
|
|
|
- destoryVideo(flvPlayer) {
|
|
|
- flvPlayer.pause();
|
|
|
- flvPlayer.unload();
|
|
|
- flvPlayer.detachMediaElement();
|
|
|
- flvPlayer.destroy();
|
|
|
- flvPlayer = null;
|
|
|
- },
|
|
|
- // 取消按钮
|
|
|
- cancel() {
|
|
|
- this.open = false;
|
|
|
- this.reset();
|
|
|
- },
|
|
|
- // 表单重置
|
|
|
- reset() {
|
|
|
- this.form = {
|
|
|
- id: null,
|
|
|
- cname: null,
|
|
|
- caddr: null,
|
|
|
- cstatus: "0",
|
|
|
- createtime: null,
|
|
|
- unitid: null,
|
|
|
- unitname: null,
|
|
|
- powerArea: null,
|
|
|
- };
|
|
|
- this.resetForm("form");
|
|
|
- },
|
|
|
- /** 搜索按钮操作 */
|
|
|
- handleQuery() {
|
|
|
- this.queryParams.pageNum = 1;
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- /** 重置按钮操作 */
|
|
|
- resetQuery() {
|
|
|
- this.resetForm("queryForm");
|
|
|
- this.handleQuery();
|
|
|
- },
|
|
|
- // 多选框选中数据
|
|
|
- handleSelectionChange(selection) {
|
|
|
- this.ids = selection.map((item) => item.id);
|
|
|
- this.single = selection.length !== 1;
|
|
|
- this.multiple = !selection.length;
|
|
|
- },
|
|
|
- selectPeo(item) {
|
|
|
- this.form.unitname = item.label;
|
|
|
- },
|
|
|
- /** 新增按钮操作 */
|
|
|
- handleAdd() {
|
|
|
- this.reset();
|
|
|
- this.open = true;
|
|
|
- this.title = "添加安防监控";
|
|
|
- },
|
|
|
- /** 修改按钮操作 */
|
|
|
- handleUpdate(row) {
|
|
|
- this.reset();
|
|
|
- const id = row.id || this.ids;
|
|
|
- getCamera(id).then((response) => {
|
|
|
- this.form = response.data;
|
|
|
- this.open = true;
|
|
|
- this.title = "修改安防监控";
|
|
|
- });
|
|
|
- },
|
|
|
- /** 提交按钮 */
|
|
|
- submitForm() {
|
|
|
- this.$refs["form"].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- if (this.form.id != null) {
|
|
|
- updateCamera(this.form).then((response) => {
|
|
|
- this.$modal.msgSuccess("修改成功");
|
|
|
- this.open = false;
|
|
|
- this.aa();
|
|
|
- });
|
|
|
- } else {
|
|
|
- addCamera(this.form).then((response) => {
|
|
|
- this.$modal.msgSuccess("新增成功");
|
|
|
- this.open = false;
|
|
|
- this.aa();
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- /** 删除按钮操作 */
|
|
|
- handleDelete(row) {
|
|
|
- const ids = row.id || this.ids;
|
|
|
- this.$modal
|
|
|
- .confirm('是否确认删除安防监控编号为"' + ids + '"的数据项？')
|
|
|
- .then(function () {
|
|
|
- return delCamera(ids);
|
|
|
- })
|
|
|
- .then(() => {
|
|
|
- this.getList();
|
|
|
- this.$modal.msgSuccess("删除成功");
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- },
|
|
|
- /** 导出按钮操作 */
|
|
|
- handleExport() {
|
|
|
- const queryParams = this.queryParams;
|
|
|
- this.$modal
|
|
|
- .confirm("是否确认导出所有安防监控数据项？")
|
|
|
- .then(() => {
|
|
|
- this.exportLoading = true;
|
|
|
- return exportCamera(queryParams);
|
|
|
- })
|
|
|
- .then((response) => {
|
|
|
- this.$download.name(response.msg);
|
|
|
- this.exportLoading = false;
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -1247,4 +533,4 @@ video {
|
|
|
margin-bottom: 5px;
|
|
|
position: relative;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
sunyanqiang