Skip to content

K
kd_control
Commit b644004a authored by zhanglw's avatar zhanglw
Browse files
Options

视频回放

parent 7dc02d56
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 272 deletions
src/assets/js/common.js
View file @ b644004a
......@@ -2994,7 +2994,36 @@ var HttpReq = function(){
responseType: 'blob'
})
},
propleGetPerequipmentVisitout: function(param){
return request({
url: '/tab/perequipment/visitout',
method: 'get',
params:param,
responseType: 'blob'
})
},
propleGetHisout: function(param){
return request({
url: '/tab/perhis/hisout',
method: 'get',
params:param,
responseType: 'blob'
})
},
propleGetHisphoto: function(param){
return request({
url: '/tab/perhis/hisphoto',
method: 'get',
params:param,
})
},
propleGetHisvideo: function(param){
return request({
url: '/tab/perhis/hisvideo',
method: 'get',
params:param,
})
},
},
......
src/views/personnelPositioning/peopleLogData/index.vue
View file @ b644004a
......@@ -5,10 +5,14 @@
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">设备号</label>
<el-input v-model="query.equipno" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">在线状态</label>
<el-select v-model="query.onlineStatus" placeholder="请选择">
<label class="el-form-item-label" style="font-weight: 500;">安全帽</label>
<el-input v-model="query.safetyhatmac" clearable size="small" placeholder="请输入安全帽MAC" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">摄像头id</label>
<el-input v-model="query.cameraid" clearable size="small" placeholder="请输入id" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">人员姓名</label>
<el-input v-model="query.name" clearable size="small" placeholder="请输入姓名" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">工种</label>
<el-select v-model="query.type" placeholder="请选择">
<el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
......@@ -22,26 +26,26 @@
<div class="content-within">
<div class="content-fix">
<div class="toolbar">
<el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>-->
<el-button size="mini" icon="el-icon-document" @click="downloadFile">导出</el-button>
</div>
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="equipname" label="设备名称" align="center"></el-table-column>
<el-table-column prop="devicetype" label="设备类型" align="center">
<el-table :data="tableData" v-loading="loading" border style="width:auto">
<el-table-column prop="safetyhatmac" label="安全帽MAC" align="center"></el-table-column>
<el-table-column prop="cameraid" label="摄像头id" align="center"></el-table-column>
<el-table-column prop="type" label="工种" align="center">
<template slot-scope="scope">
<span>{{formatOpt(devOpts, scope.row.devicetype)}}</span>
<span>{{ scope.row.type=='1'?'访客':'员工' }}</span>
</template>
</el-table-column>
<el-table-column prop="equipno" label="设备编号" align="center"></el-table-column>
<el-table-column prop="eqdanwei" label="数值单位" align="center"></el-table-column>
<el-table-column prop="installationdata" label="安装日期" align="center"></el-table-column>
<el-table-column prop="manufacture" label="生产厂家" align="center"></el-table-column>
<el-table-column prop="datarealtime" label="最后更新时间" align="center"></el-table-column>
<el-table-column prop="onlineStatus" label="状态" align="center"></el-table-column>
<el-table-column prop="name" label="人员姓名" align="center"></el-table-column>
<el-table-column prop="phone" label="电话" align="center"></el-table-column>
<el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
<span class="link-cell">轨迹回放</span>
<span class="link-cell">轨迹数据</span>
<span v-show="scope.row.userid" class="link-cell" @click="openvideoView(scope.row)">视频回放</span>
<span v-show="scope.row.userid" class="link-cell" @click="openPhotoView(scope.row)">相册</span>
</template>
</el-table-column>
</el-table>
......@@ -54,55 +58,49 @@
</div>
</div>
</div>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" :title="title" width="800px">
<el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" :status-icon="true" size="mini">
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备名称：" prop="equipname" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.equipname" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备类型：" class="form-cell" prop="devicetype">
<div class="cell-box">
<el-select v-model="formData.devicetype" placeholder="无" class="cell-input">
<el-option v-for="item in devOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备编号：" class="form-cell" prop="equipno">
<div class="cell-box">
<el-input v-model="formData.equipno" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="数值单位：" class="form-cell" prop="eqdanwei">
<div class="cell-box">
<el-input v-model="formData.eqdanwei" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
<!-- 视频 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="videoDia" :title="title" width="800px">
<div style="width:100%;height:440px;">
<video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" controls data-setup="{}">
您的浏览器不支持：HTML5 video.
</video>
</div>
</el-dialog>
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="videoView" :title="title" width="800px">
<div class="head-container">
<label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
<el-date-picker
v-model="videoDate"
type="date"
placeholder="选择日期">
</el-date-picker>
<el-button size="mini" type="success" icon="el-icon-search" @click="loadvideoList">查询</el-button>
<el-button size="mini" type="primary" icon="el-icon-video-camera" @click="videoPlay">实时播放</el-button>
</div>
<el-table :data="videoList" border style="width:auto">
<el-table-column prop="safetyhatmac" label="录像时间" align="center">
<template slot-scope="scope">
{{formatDate(scope.row.time)}}
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="100px">
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-video-camera-solid" @click="videoPlay(scope.row)">播放</el-button>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 相册 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="photoView" :title="title" width="1600px">
<div id="items">
<div class="item" v-for="(item,index) in photoList" :key="index">
<el-image :src="item.image_url" :preview-src-list="[item.image_url]"><div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div></el-image>
{{formatDate(item.time)}}
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button>
<el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
<el-button v-show="pageP>1" type="primary" icon="el-icon-arrow-left" @click="priorP()">上一页</el-button>
<el-button type="primary" @click="nextP()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</div>
</el-dialog>
......@@ -111,6 +109,9 @@
<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
name: 'peopleLogData',
......@@ -118,220 +119,194 @@ export default {
const basePathUrl = window.basePathUrl || ''
return {
configUrl: basePathUrl + 'config/config.json',
videoPlayer: null,
title: '新增',
visible: false,
photoView: false,
videoView: false,
loading: false,
videoDia: false,
page: 1,
size: 10,
total: 0,
query: {},
tableData: [],
map: null,
graphicLayer: null,
stuOpts: [
{label: '全部', value: undefined},
{label: '离线', value: '离线'},
{label: '在线', value: '在线'},
],
devOpts: [
{label: '干滩', value: 1},
{label: '库水位', value: 2},
{label: '表面位移', value: 3},
{label: '内部位移', value: 4},
{label: '浸润线', value: 5},
{label: '降雨量', value: 6},
{label: '排流量', value: 7},
{label: '水质', value: 8},
{label: '渗流量', value: 9},
{label: '外坡比', value: 16},
],
datOpts:[
{label: '是', value: 1},
{label: '否', value: 0},
],
usedOpts:[
{label: '在用', value: 1},
{label: '不在用', value: 0},
],
eqtOpts:[
{label: '4G设备', value: 0},
{label: 'IP设备', value: 1},
{label: 'mqtt设备', value: 2},
{label: '访客', value: 1},
{label: '员工', value: 0},
],
bjOpts:[
{label: '报警', value: 1},
{label: '不报警', value: 0},
],
ssOpts: [
{label: 'gnss', value: 0},
{label: '超声', value: 1},
{label: '投入式水位计或渗压计', value: 2},
{label: '沉降', value: 3},
{label: '雨量', value: 5},
{label: '测斜', value: 7},
],
tableData: [],
formData: {
longitude: '',
latitude: '',
equipname: '',
equipno: '',
devicetype: '',
eqdanwei: '',
installationdata: '',
manufacture: '',
datumpoint: 0,
installheight: '',
electricitysupply: '',
accuracy: '',
altitude: '',
onelevelalarm: '',
twolevelalarm: '',
threelevelalarm: '',
fourlevelalarm: '',
isUsed: '',
ipaddress: '',
eqtype: '',
initial: '',
initialx: '',
initialy: '',
initialz: '',
state: '',
burialDepth: '',
checkperiod: '',
sensortype: '',
bmwyX: '',
bmwyY: '',
bmwyZ: '',
jrxTrepanning: '',
jrxBurial: '',
jrxCoordX: '',
kswequipno: '',
gtwangle: '',
gtsafeheight: '',
pslspeed: '',
},
rules: {
longitude: {required: true, message: '请在地图上放置设备', trigger: 'blur'},
equipname: {required: true, message: ' ', trigger: 'blur'},
equipno: {required: true, message: ' ', trigger: 'blur'},
devicetype: {required: true, message: ' ', trigger: 'blur'},
eqdanwei: {required: true, message: ' ', trigger: 'blur'},
installationdata: {required: true, message: ' ', trigger: 'blur'},
manufacture: {required: true, message: ' ', trigger: 'blur'},
datumpoint: {required: true, message: ' ', trigger: 'blur'},
},
pageP: 1,
photoList: [],
videoDate: '',
videoList: [],
}
},
mounted() {
this.$nextTick(() => {
this.loadData();
// const debounce = (func, dalay = 100, immediate = true) => {
// let timer, callNow = immediate;
// return (...args) => {
// if (timer) clearTimeout(timer);
// if (callNow) {
// func(...args);
// callNow = false;
// }
// timer = setTimeout(() => {
// func(...args);
// }, dalay)
// }
// };
// window.addEventListener('mousewheel', debounce((e)=>{
// if(this.photoView && e.wheelDelta<0){
// console.log("鼠标滚轮后滚",e)
// }
// }), false)
})
},
methods: {
formatOpt(arr,val){
let str='';
arr.forEach((item)=>{
if(item.value==val){
str = item.label;
}
});
return str;
},
onMapload(map) {
map.unbindContextMenu();
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
const graphic = new mars3d.graphic.PointEntity({
style: {
color: "#ff0000",
pixelSize: 10,
outlineColor: "#ffffff",
outlineWidth: 2,
label: {
text: "放置位置",
font_size: 18,
color: "#ff0000",
outline: true,
outlineColor: "#000000",
outlineWidth: 5,
pixelOffsetY: -24,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0
}
},
})
graphicLayer.addGraphic(graphic);
map.on(mars3d.EventType.click, (event) => {
let p = mars3d.LngLatPoint.fromCartesian(event.cartesian);
this.formData.longitude = p.lng;
this.formData.latitude = p.lat;
graphicLayer.eachGraphic((graphic) => {
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(p.lng, p.lat, 0), 0)
})
});
this.map = map;
this.graphicLayer = graphicLayer;
},
loadData() {
var sort = 'id,desc';
var param = this.query;
param.page = this.page - 1;
param.pageSize = this.size;
param.sort = sort;
param.size = this.size;
param.vague = {cameraid:param.cameraid||undefined,safetyhatmac:param.safetyhatmac||undefined,name:param.name||undefined};
param.exact = {type:param.type};
param.sort = `date,desc`;
this.$nextTick(() => {
//获取安检信息
HttpReq.truckDispatching.slopeGetDeviceList(param).then((res) => {
HttpReq.truckDispatching.propleGetPerequipment(param).then((res) => {
if (res.code == 200) {
this.loading = false;
this.tableData = res.data.records;
this.total = res.data.total;
this.tableData = res.body.list;
this.total = res.body.total;
}
})
})
},
toAdd() {
this.title = '新增';
this.visible = true;
},
toEdit(item) {
HttpReq.truckDispatching.slopeGetDevice({id:item.id}).then((res) => {
if (res.code == 200) {
this.title = '编辑';
this.visible = true;
this.formData = res.data;
setTimeout(() => {
this.graphicLayer.eachGraphic((graphic) => {
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(this.formData.longitude, this.formData.latitude, 0), 0)
})
this.map.setCameraView({ lat: this.formData.latitude, lng: this.formData.longitude });
},5000)
}
loadDataP() {
var param = {
userid: this.userid,
page: this.pageP,
};
this.$nextTick(() => {
//获取安检信息
HttpReq.truckDispatching.propleGetHisphoto(param).then((res) => {
if (res.code == 200) {
if(res.body.data){
this.photoList = res.body.data;
this.totalP = res.body.total;
}else{
this.pageP--;
this.$message({
message: res.body.msg
});
}
}
})
})
},
toDelete(item) {
var id = item.id;
this.$confirm('确认删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
HttpReq.truckDispatching.slopeDeleteDevice({id}).then((res) => {
loadvideoList() {
let param = {
userid: this.userid,
year: `${this.videoDate.getFullYear()}`,
month: `${('0' + (this.videoDate.getMonth() + 1)).substr(-2)}`,
day: `${('0' + (this.videoDate.getDate())).substr(-2)}`
};
this.$nextTick(() => {
//获取安检信息
HttpReq.truckDispatching.propleGetHisvideo(param).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.loadData();
if(res.body.data){
this.videoList = res.body.data;
}else{
this.$message({
message: res.body.msg
});
}
}
})
})
},
cancelForm() {
this.visible = false;
this.$refs.formViewRef.resetFields();
openPhotoView(item) {
this.title = '相册';
this.photoView = true;
this.userid = item.userid;
this.pageP = 1;
this.photoList = [];
this.loadDataP();
},
videoPlay(item){
this.videoDia = true;
this.$nextTick(() => {
if(!this.videoPlayer){
this.videoPlayer = videojs('videoRealtime', {
fluid: true,
bigPlayButton: false,
textTrackDisplay: false,
sources: [{ src:item.url, type: "video/mp4" }],
posterImage: true,
errorDisplay: false,
controlBar: true
}, ()=> {
console.log('video ready!')
this.videoPlayer.play();
})
}else{
let data = { src:item.url, type: "video/mp4" }
this.videoPlayer.pause();
this.videoPlayer.src(data);
this.videoPlayer.load(data);
this.videoPlayer.play();
}
})
},
formatDate(time) {
let d = time ? new Date(time * 1000) : new Date();
return `${d.getFullYear()}/${('0' + (d.getMonth() + 1)).substr(-2)}/${('0' + (d.getDate())).substr(-2)} ${('0' + (d.getHours())).substr(-2)}:${('0' + (d.getMinutes())).substr(-2)}:${('0' + (d.getSeconds())).substr(-2)}`;
},
openvideoView(item) {
this.title = '视频回放';
this.videoView = true;
this.userid = item.userid;
this.videoList = [];
this.videoDate = new Date();
this.loadvideoList();
},
download(text, name, suffix) {
var link = document.createElement('a');
link.style.display = 'none';
link.href = URL.createObjectURL(new Blob([text], { type: "application/vnd.ms-excel" }));
link.setAttribute('download', name + '.' + suffix);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
},
downloadFile() {
var loading = this.$loading({
lock: true,
text: '请稍后.....',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var param = this.query;
param.page = this.page - 1;
param.size = this.size;
param.vague = {cameraid:param.cameraid||undefined,safetyhatmac:param.safetyhatmac||undefined,name:param.name||undefined};
param.exact = {type:param.type};
param.sort = `date,desc`;
HttpReq.truckDispatching.propleGetHisout(param).then((res) => {
loading.close();
let d = new Date();
this.download(res, `人员设备历史记录${d.getFullYear()}${('0'+(d.getMonth()+1)).substr(-2)}${('0'+(d.getDate())).substr(-2)}`, 'xlsx')
})
},
tableRowClassName({row, rowIndex}) {
cancelForm() {
this.photoView = false;
this.videoView = false;
this.videoDia = false;
},
// 点击搜索
toSearch() {
......@@ -352,34 +327,13 @@ export default {
this.size = e
this.loadData()
},
submitForm(validateName, item) {
this.$refs[validateName].validate(valid => {
if (valid) {
if (this.title === '新增') {
HttpReq.truckDispatching.slopePostDevice(item).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.cancelForm();
this.loadData()
}
})
} else {
HttpReq.truckDispatching.slopePutDevice(item).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.cancelForm();
this.loadData()
}
})
}
}
});
priorP(){
this.pageP -= 1;
this.loadDataP()
},
nextP(){
this.pageP += 1;
this.loadDataP()
},
},
}
......@@ -433,4 +387,35 @@ export default {
width: 680px;
overflow: hidden;
}
.link-cell {
color: dodgerblue;
cursor: pointer;
}
#items {
width: 100%;
height: 420px;
margin: 0 auto;
column-count: 5;
column-gap: 0;
}
.item {
padding: 2px;
width: 100%;
color: purple;
font-size: 18px;
font-weight: bolder;
text-align: center;
}
.image-slot {
width: 308px;
height: 173px;
}
.monitorCover_Video{
left: 50%;
transform: translateX(-50%);
width: 80vw;
height: 90vh;
}
</style>
src/views/personnelPositioning/visitPeople/index.vue
View file @ b644004a
......@@ -208,10 +208,10 @@ export default {
if(param.timeList && param.timeList.length){
param.daterange=param.timeList.join(',');
}
HttpReq.truckDispatching.propleGetPerequipmentOut(param).then((res) => {
HttpReq.truckDispatching.propleGetPerequipmentVisitout(param).then((res) => {
loading.close();
let d = new Date();
this.download(res, `人员设备定位_${d.getFullYear()}${('0'+(d.getMonth()+1)).substr(-2)}${('0'+(d.getDate())).substr(-2)}`, 'xlsx')
this.download(res, `来访人员设备_${d.getFullYear()}${('0'+(d.getMonth()+1)).substr(-2)}${('0'+(d.getDate())).substr(-2)}`, 'xlsx')
})
},
cancelForm() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment