Skip to content

H
holo-web
Commit 2522c27a authored by wuquanxin's avatar wuquanxin
Browse files
Options

代码提交

parent 69e9352a
Hide whitespace changes
Inline Side-by-side
Showing with 422 additions and 10 deletions
wj-smartcity/src/components/Standard/cameraVideo.vue
View file @ 2522c27a
<template> <template>
<div class="cameraVideo"> <div class="cameraVideo">
<video <video
style="width: 100%; height: 100%;object-fit: fill;" style="width: 400px; height: 100%;object-fit: fill;"
@loadstart="loadstart($event)" @loadstart="loadstart($event)"
@canplay="canplay($event)" @canplay="canplay($event)"
class="videoControl" class="videoControl"
muted muted
:id="ownVideoData.oid" :id="ownVideoData.oid"
></video> ></video>
<div class="cameraTable">
<el-table
:data="tableData"
height="230px"
style="width: 100%;">
<el-table-column prop="producer" label="厂商"/>
<el-table-column prop="channelName" label="通道名称" show-overflow-tooltip width="240"/>
<el-table-column prop="startTime" label="统计开始时间" show-overflow-tooltip width="150"/>
<el-table-column prop="laneNo" align="right" label="车道号">
</el-table-column>
<el-table-column prop="flowTypeDes" align="right" label="车道类型">
</el-table-column>
<el-table-column prop="vehicleCount" align="right" label="车道总流量">
</el-table-column>
<el-table-column prop="straightCount" align="right" label="直行通道车辆数" width="100">
</el-table-column>
<el-table-column prop="leftCount" align="right" label="左转通道车辆数" width="100">
</el-table-column>
<el-table-column prop="rightCount" align="right" label="右转通道车辆数" width="100">
</el-table-column>
<el-table-column prop="turnCount" align="right" label="掉头通道车辆数" width="100">
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="paginationData.pageNum"
:page-size="paginationData.pageSize"
layout=" prev, pager, next"
:total="paginationData.total">
</el-pagination>
</div>
</div> </div>
</template> </template>
<script> <script>
import { equip_camera } from "../../dao/situation"; import { equip_camera,api_getCameraTable } from "../../dao/situation";
import Videojs from "video.js"; import Videojs from "video.js";
import "./videojs-flvjs-plugin"; import "./videojs-flvjs-plugin";
export default { export default {
...@@ -22,10 +53,320 @@ export default { ...@@ -22,10 +53,320 @@ export default {
data() { data() {
return { return {
player: null, player: null,
ownVideoData:{} ownVideoData:{},
tableData: [],
paginationData:{
total:0,
pageNum:1,
pageSize:8,
},
}; };
}, },
methods: { methods: {
handleCurrentChange(e){
this.paginationData.pageNum = e
this.getCameraTable();
},
getCameraTable(){
console.log(this.videoData);
api_getCameraTable({
"channelName": this.videoData.equipName,
"pageNum": this.paginationData.pageNum,
"pageSize": this.paginationData.pageSize
}).then(res=>{
if(res.code== 200){
/*res = {
"code": 200,
"content": {
"pageNum": 1,
"pageSize": 10,
"rows": [
{
"avgSpeed": 52,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 2,
"flowTypeDesc": "直行",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 5,
"laneDirDesc": "南",
"laneNo": 0,
"laneNum": 3,
"leftCount": 0,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:51:00",
"straightCount": 37,
"turnCount": 0,
"vehicleCount": 50
},
{
"avgSpeed": 53,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 2,
"flowTypeDesc": "直行",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 5,
"laneDirDesc": "南",
"laneNo": 0,
"laneNum": 4,
"leftCount": 0,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:51:00",
"straightCount": 28,
"turnCount": 0,
"vehicleCount": 33
},
{
"avgSpeed": 46,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 2,
"flowTypeDesc": "直行",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 1,
"laneDirDesc": "北",
"laneNo": 0,
"laneNum": 5,
"leftCount": 0,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:51:00",
"straightCount": 0,
"turnCount": 0,
"vehicleCount": 204
},
{
"avgSpeed": 36,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 1,
"flowTypeDesc": "左转",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 5,
"laneDirDesc": "南",
"laneNo": 0,
"laneNum": 1,
"leftCount": 2,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:46:00",
"straightCount": 0,
"turnCount": 0,
"vehicleCount": 3
},
{
"avgSpeed": 55,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 2,
"flowTypeDesc": "直行",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 5,
"laneDirDesc": "南",
"laneNo": 0,
"laneNum": 2,
"leftCount": 0,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:46:00",
"straightCount": 18,
"turnCount": 0,
"vehicleCount": 29
},
{
"avgSpeed": 55,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 2,
"flowTypeDesc": "直行",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 5,
"laneDirDesc": "南",
"laneNo": 0,
"laneNum": 3,
"leftCount": 0,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:46:00",
"straightCount": 30,
"turnCount": 0,
"vehicleCount": 39
},
{
"avgSpeed": 42,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 2,
"flowTypeDesc": "直行",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 5,
"laneDirDesc": "南",
"laneNo": 0,
"laneNum": 4,
"leftCount": 0,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:46:00",
"straightCount": 10,
"turnCount": 0,
"vehicleCount": 16
},
{
"avgSpeed": 46,
"cameraIndexCode": "",
"channelName": "龙鼎大道与龙翔路路口北向南",
"crossId": "",
"cycle": 0,
"deviceId": "",
"dt": 0,
"eventDesc": "",
"eventType": "",
"expTime": "",
"expand": "",
"flowType": 2,
"flowTypeDesc": "直行",
"id": "",
"ipAddr": "",
"ipv6Addr": "",
"laneDir": 1,
"laneDirDesc": "北",
"laneNo": 0,
"laneNum": 5,
"leftCount": 0,
"macAddr": "",
"pdTime": "",
"portNo": 0,
"producer": "HIKVISION",
"recvTime": "",
"rightCount": 0,
"sendTime": "",
"startTime": "2024-11-08 13:46:00",
"straightCount": 0,
"turnCount": 0,
"vehicleCount": 184
}
],
"startRowNum": 0,
"total": 3133,
"totalPageNum": 314
},
"message": "",
"status": "success",
"timestamp": 0
}*/
this.tableData = res.content.rows
this.paginationData.total = res.content.total
}
})
},
canplay() { canplay() {
this.$emit("vidCanplay", this.ownVideoData); this.$emit("vidCanplay", this.ownVideoData);
}, },
...@@ -44,6 +385,7 @@ export default { ...@@ -44,6 +385,7 @@ export default {
mounted() { mounted() {
this.ownVideoData = this.videoData this.ownVideoData = this.videoData
this.getCameraTable();
// m3u8 // m3u8
if (this.ownVideoData && this.ownVideoData.functionType == "99") { if (this.ownVideoData && this.ownVideoData.functionType == "99") {
setTimeout(() => { setTimeout(() => {
...@@ -115,9 +457,9 @@ export default { ...@@ -115,9 +457,9 @@ export default {
}, },
}, },
sources: [ sources: [
{ {
src: this.ownVideoData.videoUrl, src: this.ownVideoData.videoUrl,
type: "video/x-flv" type: "video/x-flv"
// src: `111.mp4`, // src: `111.mp4`,
} }
], ],
...@@ -156,10 +498,71 @@ video { ...@@ -156,10 +498,71 @@ video {
} }
.cameraVideo { .cameraVideo {
position: relative;
width: 1000px;
display: flex;
justify-content: space-between;
.videoControl { .videoControl {
width: 400px;
object-fit: fill; object-fit: fill;
} }
} }
.cameraTable{
//position: absolute;
//left: 100% ;
//top: 0;
height: 100%;
width:400px;
overflow-x:auto;
background: #0f2645;
border-left:1px solid #037bb2;
margin-left: 1px;
padding:10px 20px;
box-sizing:border-box;
z-index:1000;
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
background-color: transparent !important;
}
::v-deep .el-table__body-wrapper{
z-index: 6
}
::v-deep .el-table{
background: transparent;
&::before{
background: none;
height: 0 !important;
}
tr:hover > td {
background-color: transparent;
}
td.el-table__cell{
border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
th,td,tr{
padding: 0;
color: #fff;
background: #0f2645;
}
.cell{
padding-right: 0;
padding-left: 5px;
color:#fff;
font-size: 12px;
}
}
::v-deep .el-pagination{
position: absolute;
bottom: 0;
button:disabled,.el-pager li ,.btn-next, .btn-prev{
background: transparent;
color:rgba(255,255,255,.5);
}
.el-pager li.active{
color:#409EFF !important;
}
}
}
::v-deep .el-icon-loading { ::v-deep .el-icon-loading {
position: absolute; position: absolute;
......
wj-smartcity/src/dao/situation.js
View file @ 2522c27a
...@@ -178,4 +178,12 @@ export const noVehicleDetail = () =>request({ ...@@ -178,4 +178,12 @@ export const noVehicleDetail = () =>request({
export const noVehicleTrend = () => request({ export const noVehicleTrend = () => request({
url: '/holo/analysis-cross-non-motor/category-monitor-trend', url: '/holo/analysis-cross-non-motor/category-monitor-trend',
method: 'get', method: 'get',
}) })
\ No newline at end of file
export const api_getCameraTable = (data) =>
request({
url: '/holo/analysis-statistic-data-lane/page',
method: 'post',
data: data
})
wj-smartcity/src/utils/mapboxTools.js
View file @ 2522c27a
...@@ -680,7 +680,8 @@ export function addOrUpdateEventPoint1(map, geo, callback) { ...@@ -680,7 +680,8 @@ export function addOrUpdateEventPoint1(map, geo, callback) {
} }
// 相机设备 // 相机设备
export function addOrUpdateEquipCamera(map, geo, callback) { export function addOrUpdateEquipCamera(map, arr, callback) {
let geo = convertPointsWktToGeo(arr);
if (!map.getSource("camera")) { if (!map.getSource("camera")) {
console.log("addsource"); console.log("addsource");
map.addSource("camera", { map.addSource("camera", {
......
wj-smartcity/src/views/signal/mapPopup/equipmentPopup.vue
View file @ 2522c27a
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
{{ model.equipAddr || "暂无安装地址信息" }} {{ model.equipAddr || "暂无安装地址信息" }}
</div> </div>
<div class="camera_main"> <div class="camera_main">
<camera-video <camera-video
ref="cameraVideo" ref="cameraVideo"
style="height: 100%; width: 100%" style="height: 100%; width: 100%"
...@@ -358,7 +358,7 @@ export default { ...@@ -358,7 +358,7 @@ export default {
} }
.equip_camera { .equip_camera {
width: 447PX; width: 800PX;
.camera_header { .camera_header {
height: 43PX; height: 43PX;
......
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