Skip to content

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

视频回放

parent 7dc02d56
Show 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(){ ...@@ -2994,7 +2994,36 @@ var HttpReq = function(){
responseType: 'blob' 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 @@ ...@@ -5,10 +5,14 @@
<!--工具栏--> <!--工具栏-->
<div class="head-container"> <div class="head-container">
<!-- 搜索 --> <!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">设备号</label> <label class="el-form-item-label" style="font-weight: 500;">安全帽</label>
<el-input v-model="query.equipno" clearable size="small" placeholder="请输入设备号" style="width:180px;"/> <el-input v-model="query.safetyhatmac" clearable size="small" placeholder="请输入安全帽MAC" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">在线状态</label> <label class="el-form-item-label" style="font-weight: 500;">摄像头id</label>
<el-select v-model="query.onlineStatus" placeholder="请选择"> <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-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button> <el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
...@@ -22,26 +26,26 @@ ...@@ -22,26 +26,26 @@
<div class="content-within"> <div class="content-within">
<div class="content-fix"> <div class="content-fix">
<div class="toolbar"> <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>
<div class="content"> <div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName"> <el-table :data="tableData" v-loading="loading" border style="width:auto">
<el-table-column prop="equipname" label="设备名称" align="center"></el-table-column> <el-table-column prop="safetyhatmac" label="安全帽MAC" align="center"></el-table-column>
<el-table-column prop="devicetype" label="设备类型" align="center"> <el-table-column prop="cameraid" label="摄像头id" align="center"></el-table-column>
<el-table-column prop="type" label="工种" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{formatOpt(devOpts, scope.row.devicetype)}}</span> <span>{{ scope.row.type=='1'?'访客':'员工' }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="equipno" label="设备编号" align="center"></el-table-column> <el-table-column prop="name" label="人员姓名" align="center"></el-table-column>
<el-table-column prop="eqdanwei" label="数值单位" align="center"></el-table-column> <el-table-column prop="phone" 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 label="操作" align="center" fixed="right"> <el-table-column label="操作" align="center" fixed="right">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button> <span class="link-cell">轨迹回放</span>
<el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -54,55 +58,49 @@ ...@@ -54,55 +58,49 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 表单渲染 --> <!-- 视频 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" :title="title" width="800px"> <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="videoDia" :title="title" width="800px">
<el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" :status-icon="true" size="mini"> <div style="width:100%;height:440px;">
<el-row> <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" controls data-setup="{}">
<el-col :span="12"> 您的浏览器不支持：HTML5 video.
<div class="grid-content"> </video>
<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> </div>
</el-form-item> </el-dialog>
</div> <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="videoView" :title="title" width="800px">
</el-col> <div class="head-container">
<el-col :span="12"> <label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
<div class="grid-content"> <el-date-picker
<el-form-item label="设备类型：" class="form-cell" prop="devicetype"> v-model="videoDate"
<div class="cell-box"> type="date"
<el-select v-model="formData.devicetype" placeholder="无" class="cell-input"> placeholder="选择日期">
<el-option v-for="item in devOpts" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-date-picker>
</el-select> <el-button size="mini" type="success" icon="el-icon-search" @click="loadvideoList">查询</el-button>
</div> <el-button size="mini" type="primary" icon="el-icon-video-camera" @click="videoPlay">实时播放</el-button>
</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> </div>
</el-col> <el-table :data="videoList" border style="width:auto">
<el-col :span="12"> <el-table-column prop="safetyhatmac" label="录像时间" align="center">
<div class="grid-content"> <template slot-scope="scope">
<el-form-item label="数值单位：" class="form-cell" prop="eqdanwei"> {{formatDate(scope.row.time)}}
<div class="cell-box"> </template>
<el-input v-model="formData.eqdanwei" class="cell-input"></el-input> </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>
</el-form-item>
</div> </div>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button> <el-button v-show="pageP>1" type="primary" icon="el-icon-arrow-left" @click="priorP()">上一页</el-button>
<el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button> <el-button type="primary" @click="nextP()">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -111,6 +109,9 @@ ...@@ -111,6 +109,9 @@
<script> <script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js'; 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 { export default {
name: 'peopleLogData', name: 'peopleLogData',
...@@ -118,220 +119,194 @@ export default { ...@@ -118,220 +119,194 @@ export default {
const basePathUrl = window.basePathUrl || '' const basePathUrl = window.basePathUrl || ''
return { return {
configUrl: basePathUrl + 'config/config.json', configUrl: basePathUrl + 'config/config.json',
videoPlayer: null,
title: '新增', title: '新增',
visible: false, photoView: false,
videoView: false,
loading: false, loading: false,
videoDia: false,
page: 1, page: 1,
size: 10, size: 10,
total: 0, total: 0,
query: {}, query: {},
tableData: [],
map: null, map: null,
graphicLayer: null, graphicLayer: null,
stuOpts: [ stuOpts: [
{label: '全部', value: undefined}, {label: '全部', value: undefined},
{label: '离线', value: '离线'}, {label: '访客', value: 1},
{label: '在线', value: '在线'}, {label: '员工', value: 0},
],
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},
],
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: [], pageP: 1,
formData: { photoList: [],
longitude: '', videoDate: '',
latitude: '', videoList: [],
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'},
},
} }
}, },
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
this.loadData(); 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: { 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() { loadData() {
var sort = 'id,desc';
var param = this.query; var param = this.query;
param.page = this.page - 1; param.page = this.page - 1;
param.pageSize = this.size; param.size = this.size;
param.sort = sort; 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(() => { this.$nextTick(() => {
//获取安检信息 //获取安检信息
HttpReq.truckDispatching.slopeGetDeviceList(param).then((res) => { HttpReq.truckDispatching.propleGetPerequipment(param).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.loading = false; this.loading = false;
this.tableData = res.data.records; this.tableData = res.body.list;
this.total = res.data.total; this.total = res.body.total;
} }
}) })
}) })
}, },
toAdd() { loadDataP() {
this.title = '新增'; var param = {
this.visible = true; userid: this.userid,
}, page: this.pageP,
toEdit(item) { };
HttpReq.truckDispatching.slopeGetDevice({id:item.id}).then((res) => { this.$nextTick(() => {
//获取安检信息
HttpReq.truckDispatching.propleGetHisphoto(param).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.title = '编辑'; if(res.body.data){
this.visible = true; this.photoList = res.body.data;
this.formData = res.data; this.totalP = res.body.total;
setTimeout(() => { }else{
this.graphicLayer.eachGraphic((graphic) => { this.pageP--;
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(this.formData.longitude, this.formData.latitude, 0), 0) this.$message({
}) message: res.body.msg
this.map.setCameraView({ lat: this.formData.latitude, lng: this.formData.longitude }); });
},5000) }
} }
}) })
})
}, },
toDelete(item) { loadvideoList() {
var id = item.id; let param = {
this.$confirm('确认删除该条数据吗?', '提示', { userid: this.userid,
confirmButtonText: '确定', year: `${this.videoDate.getFullYear()}`,
cancelButtonText: '取消', month: `${('0' + (this.videoDate.getMonth() + 1)).substr(-2)}`,
type: 'warning' day: `${('0' + (this.videoDate.getDate())).substr(-2)}`
}).then((e) => { };
HttpReq.truckDispatching.slopeDeleteDevice({id}).then((res) => { this.$nextTick(() => {
//获取安检信息
HttpReq.truckDispatching.propleGetHisvideo(param).then((res) => {
if (res.code == 200) { if (res.code == 200) {
if(res.body.data){
this.videoList = res.body.data;
}else{
this.$message({ this.$message({
message: res.msg, message: res.body.msg
type: 'success'
}); });
this.loadData(); }
} }
}) })
}) })
}, },
cancelForm() { openPhotoView(item) {
this.visible = false; this.title = '相册';
this.$refs.formViewRef.resetFields(); 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);
}, },
tableRowClassName({row, rowIndex}) { 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')
})
},
cancelForm() {
this.photoView = false;
this.videoView = false;
this.videoDia = false;
}, },
// 点击搜索 // 点击搜索
toSearch() { toSearch() {
...@@ -352,34 +327,13 @@ export default { ...@@ -352,34 +327,13 @@ export default {
this.size = e this.size = e
this.loadData() this.loadData()
}, },
submitForm(validateName, item) { priorP(){
this.$refs[validateName].validate(valid => { this.pageP -= 1;
if (valid) { this.loadDataP()
if (this.title === '新增') { },
HttpReq.truckDispatching.slopePostDevice(item).then((res) => { nextP(){
if (res.code == 200) { this.pageP += 1;
this.$message({ this.loadDataP()
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()
}
})
}
}
});
}, },
}, },
} }
...@@ -433,4 +387,35 @@ export default { ...@@ -433,4 +387,35 @@ export default {
width: 680px; width: 680px;
overflow: hidden; 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> </style>
src/views/personnelPositioning/visitPeople/index.vue
View file @ b644004a
...@@ -208,10 +208,10 @@ export default { ...@@ -208,10 +208,10 @@ export default {
if(param.timeList && param.timeList.length){ if(param.timeList && param.timeList.length){
param.daterange=param.timeList.join(','); param.daterange=param.timeList.join(',');
} }
HttpReq.truckDispatching.propleGetPerequipmentOut(param).then((res) => { HttpReq.truckDispatching.propleGetPerequipmentVisitout(param).then((res) => {
loading.close(); loading.close();
let d = new Date(); 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() { 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