<template>
|
<div class="mainer">
|
<el-row>
|
<el-col :span="4">
|
<div class="">
|
<ul class="info-list">
|
<li class="flex">
|
<span class="label">公司名称:</span>
|
<span class="content">{{ info.enterpriseName }}</span>
|
</li>
|
<li class="flex">
|
<span class="label">车牌号码:</span>
|
<span class="content">{{ info.vehicleNumber }}</span>
|
</li>
|
<li class="flex">
|
<span class="label">车牌颜色:</span>
|
<span class="content">{{ info.licensePlateColor }}</span>
|
</li>
|
<li class="flex">
|
<span class="label">车辆营运类型:</span>
|
<span class="content">{{ info.operateType }}</span>
|
</li>
|
<li class="flex">
|
<span class="label">经营区域:</span>
|
<span class="content">{{ info.operatingArea }}</span>
|
</li>
|
<li class="flex">
|
<span class="label">所属车主:</span>
|
<span class="content">{{ info.driverName }}</span>
|
</li>
|
<li class="flex">
|
<span class="label">联系电话:</span>
|
<span class="content">{{ info.driverPhone }}</span>
|
</li>
|
</ul>
|
<hr />
|
<div class="mt--20 ml--20 mr--20">
|
<div class="section-title mb--20">查看视频录像</div>
|
<el-form
|
:inline="true"
|
:model="searchForm"
|
class="demo-form-inline"
|
>
|
<el-form-item label="开始时间">
|
<el-date-picker
|
v-model="searchForm.startTime"
|
type="datetime"
|
placeholder="选择开始时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:picker-options="startPickerOptions"
|
@change="handleStartTimeChange"
|
/>
|
</el-form-item>
|
<el-form-item label="结束时间">
|
<el-date-picker
|
v-model="searchForm.endTime"
|
type="datetime"
|
placeholder="选择结束时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:picker-options="endPickerOptions"
|
@change="handleEndTimeChange"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="search">查询</el-button>
|
<el-button @click="resetForm">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="20">
|
<div class="grid-content" style="">
|
<div id="hstplayer" style="width: 100%; height: 100%;"></div>
|
<!-- <PlayLive
|
v-if="urlLink"
|
:serverPort="serverPort"
|
:serverIp="serverIp"
|
:carId="$route.query.id"
|
:urlLink="urlLink"
|
@video-error="handleVideoError"
|
/>
|
<div v-else class="empty-state">
|
<el-empty
|
description="请选择时间范围并点击查询获取视频"
|
:image-size="80"
|
></el-empty>
|
</div> -->
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { getDetail, getPlaybackVideo } from "./service";
|
import PlayLive from "@/components/PlayLive";
|
|
export default {
|
components: {
|
PlayLive,
|
},
|
data() {
|
return {
|
info: {},
|
video: null,
|
videoUrl: "",
|
searchForm: {
|
startTime: "",
|
endTime: "",
|
},
|
startPickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > Date.now();
|
},
|
},
|
endPickerOptions: {
|
disabledDate(time) {
|
return time.getTime() > Date.now();
|
},
|
},
|
serverIp: "",
|
serverPort: "",
|
urlLink: "",
|
tokenID: 'shehongchuzu'
|
};
|
},
|
created() {
|
getDetail(this.$route.query.id).then((res) => {
|
this.info = res;
|
});
|
},
|
mounted() {
|
// 动态加载脚本
|
this.loadScripts().then(() => {
|
//视频参数
|
var params = {
|
allowFullscreen: "true",
|
allowScriptAccess: "always",
|
bgcolor: "#FFFFFF",
|
wmode: "transparent",
|
};
|
|
//初始化视频插件
|
window.hstVideoPlay.init(this.tokenID, "hstplayer", params, 1); // 设置为1个窗口
|
});
|
},
|
methods: {
|
loadScripts() {
|
return new Promise((resolve, reject) => {
|
const scripts = [
|
'/scripts/jquery-1.7.1.min.js',
|
'/scripts/md5.js',
|
'/scripts/request.js',
|
'/scripts/swfobject-all.js',
|
'/scripts/swfobject-play.js',
|
'/scripts/swfobject-h5.js',
|
'/scripts/flv.min.js',
|
'/scripts/DPlayer.min.js',
|
'/scripts/HZPlayer.js',
|
'/scripts/HZRecorder.js'
|
];
|
|
const loadScript = (index) => {
|
if (index >= scripts.length) {
|
resolve();
|
return;
|
}
|
|
const script = document.createElement('script');
|
script.src = scripts[index];
|
script.onload = () => loadScript(index + 1);
|
script.onerror = reject;
|
document.head.appendChild(script);
|
};
|
|
loadScript(0);
|
});
|
},
|
handleStartTimeChange(val) {
|
if (val && this.searchForm.endTime) {
|
if (new Date(val) > new Date(this.searchForm.endTime)) {
|
this.$message.warning("开始时间不能大于结束时间");
|
this.searchForm.startTime = "";
|
}
|
}
|
// 更新结束时间选择器的禁用时间
|
this.endPickerOptions.disabledDate = (time) => {
|
return (
|
time.getTime() > Date.now() ||
|
(this.searchForm.startTime &&
|
time.getTime() < new Date(this.searchForm.startTime).getTime())
|
);
|
};
|
},
|
handleEndTimeChange(val) {
|
if (val && this.searchForm.startTime) {
|
if (new Date(val) < new Date(this.searchForm.startTime)) {
|
this.$message.warning("结束时间不能小于开始时间");
|
this.searchForm.endTime = "";
|
}
|
}
|
},
|
search() {
|
if (!this.searchForm.startTime || !this.searchForm.endTime) {
|
this.$message.warning("请选择开始时间和结束时间");
|
return;
|
}
|
|
// 验证时间范围
|
const startTime = new Date(this.searchForm.startTime);
|
const endTime = new Date(this.searchForm.endTime);
|
const now = new Date();
|
|
if (startTime > now || endTime > now) {
|
this.$message.warning("选择的时间不能超过当前时间");
|
return;
|
}
|
|
if (startTime > endTime) {
|
this.$message.warning("开始时间不能大于结束时间");
|
return;
|
}
|
hstVideoPlay.realTimeOpenVideo('100506658377', '2')
|
// hstVideoPlay.historyOpenVideo('100506658377','2','2','')
|
getPlaybackVideo({
|
startTime: new Date(this.searchForm.startTime).getTime(),
|
endTime: new Date(this.searchForm.endTime).getTime(),
|
id: this.$route.query.id,
|
})
|
.then((res) => {
|
console.log("获取视频成功:", res);
|
// if (res && res.serverIp && res.serverPort) {
|
// // 使用 videoPlay 组件播放视频
|
// window.hstVideoPlay.historyOpenVideo(
|
// this.$route.query.id, // deviceId
|
// '1', // channelId
|
// 0, // dataType
|
// 1, // streamType
|
// 0, // storageType
|
// this.searchForm.startTime, // startTime
|
// this.searchForm.endTime // endTime
|
// );
|
// } else {
|
// this.$message.error("未获取到视频地址");
|
// }
|
})
|
.catch((err) => {
|
console.error("获取视频失败:", err);
|
this.$message.error("获取视频失败,请稍后重试");
|
});
|
},
|
handleVideoError() {
|
this.urlLink = "";
|
this.$message.error("视频加载失败,请稍后重试");
|
},
|
resetForm() {
|
this.searchForm.startTime = "";
|
this.searchForm.endTime = "";
|
// 重置结束时间选择器的禁用时间
|
this.endPickerOptions.disabledDate = (time) => {
|
return time.getTime() > Date.now();
|
};
|
},
|
},
|
beforeDestroy() {
|
// 关闭视频播放
|
if (this.$route.query.id) {
|
window.hstVideoPlay.historyCloseVideo(this.$route.query.id, '1');
|
}
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.mainer {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.info-list {
|
list-style: none;
|
padding: 0;
|
margin: 20px 0;
|
|
li {
|
margin-bottom: 12px;
|
font-size: 16px;
|
|
.label {
|
width: 130px;
|
text-align: right;
|
margin-right: 12px;
|
color: #606266;
|
}
|
|
.content {
|
flex: 1;
|
}
|
}
|
}
|
|
.section-title {
|
font-size: 18px;
|
font-weight: bold;
|
color: #303133;
|
}
|
|
.el-row {
|
flex: 1;
|
display: flex;
|
}
|
|
.el-col {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.form-container {
|
.el-form-item {
|
margin-bottom: 20px;
|
}
|
}
|
|
.grid-content {
|
background: #000;
|
flex: 1;
|
position: relative;
|
overflow: hidden;
|
}
|
|
video {
|
max-width: 100%;
|
max-height: 100%;
|
object-fit: contain;
|
}
|
</style>
|