Skip to content

卡
卡车调度系统
Commit c3170788 authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent a4cbe12c
Show whitespace changes
Inline Side-by-side
Showing with 595 additions and 70 deletions
src/assets/js/common.js
View file @ c3170788
......@@ -464,6 +464,22 @@ var HttpReq = function(){
data:data,
})
},
//视频监控——矿山监控——摄像头萤石云视频监控获取token
mineMonitoringGetTokenaQuery: function(param){
return request({
url: '/cameraDetail/token',
method: 'get',
params:param,
})
},
//视频监控——矿山监控——摄像头视频监控云台控制判断有无
mineMonitoringHowYuntaiQuery: function(param){
return request({
url: '/cameraDetail/yuntai',
method: 'get',
params:param,
})
},
//视频监控——车辆监控管理——车队管理
carMonitoringFleetQuery: function(param){
return request({
......
src/components/ezuikit/EZUIKitJs.vue
View file @ c3170788
<template>
<div style="background: white">
<div>
<el-container>
<el-header style="font-size: 20px; font-weight: bold"
>鑫海矿业监控视频</el-header
>
<el-header style="font-size: 20px; font-weight: bold">
卡车调度系统矿山监控视频
</el-header>
<el-container>
<el-aside width="230px" style="height: 86vh">
<el-aside width="230px" style="height: 79vh">
<el-tree
:data="videoData"
:props="defaultProps"
......@@ -62,16 +61,7 @@
<script>
// import Hls from "hls.js"
// import EZUIKit from "ezuikit-js";
// import { httpGet, httpPost, httpPostForJson } from "@/common/httpBean.js";
// import {
// mainCameraDetail,
// cameraDetailToken,
// cameraDetailDahuatoken,
// mainCamera,
// startCamera,
// stopCamera,
// cameraDetailYuntai,
// } from "@/axios/api.js";
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
var noPtzhls = null;
export default {
data() {
......@@ -102,31 +92,27 @@ export default {
},
mounted() {
this.getCode();
this.getDaHua();
this.getAccessToken();
//this.getDaHua();
//this.getAccessToken();
},
methods: {
getAccessToken() {
httpGet(cameraDetailToken).then(res => {
let param = {};
HttpReq.truckDispatching.mineMonitoringGetTokenaQuery(param).then((res) => {
this.accessToken = res.data.accessToken;
});
})
},
getCode() {
//分区数据
httpGet(mainCamera, { size: 999 }).then((res) => {
//console.log(res);
HttpReq.truckDispatching.mineMonitoringPartitionQuery({size: 999}).then((res) => {
let data1 = [];
res.content.forEach((item) => {
item.label = item.name;
data1.push(item);
});
//this.videoData = data1;
if (res != "") {
//总摄像头数据
httpGet(mainCameraDetail, { size: 999 }).then((res) => {
let fenqu1 = [];
let fenqu2 = [];
let fenqu3 = [];
HttpReq.truckDispatching.mineMonitoringCameraQuery({size: 999}).then((res) => {
let fenquName = [];
res.content.forEach((item,index) => {
item.ref = "video" + index;
......@@ -134,31 +120,19 @@ export default {
item.label = item.cameraName;
fenquName.push(item);
});
fenquName.forEach(function (item) {
if (item.cameraId == 1) {
fenqu1.push(item);
} else if (item.cameraId == 2) {
fenqu2.push(item);
} else {
fenqu3.push(item);
}
});
let videoData1 = data1;
videoData1.forEach((item) => {
if (item.id == 1) {
item.children = fenqu1;
} else if (item.id == 2) {
item.children = fenqu2;
} else {
item.children = fenqu3;
data1.forEach((item) => {
item.children = [];
fenquName.forEach((itemSon,index)=>{
if(item.id == itemSon.cameraId){
item.children.push(itemSon);
}
})
});
this.videoData = videoData1;
this.videoData = data1;
console.log(this.videoData);
});
})
}
});
})
},
handleNodeClick(data) {
console.log(data);
......@@ -184,8 +158,8 @@ export default {
item.hls.loadSource(item.url)
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
      that.$refs[item.ref][0].play();
    });
that.$refs[item.ref][0].play();
});
})
})
......@@ -203,8 +177,8 @@ export default {
item.hls.loadSource(item.url)
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
      that.$refs[item.ref][0].play();
    });
that.$refs[item.ref][0].play();
});
})
})
......@@ -315,15 +289,15 @@ export default {
} else {
this.btnChildren = false;
if (data.brand == 1) {
httpGet(cameraDetailYuntai, {ip:data.cameraIp}).then((res) => {
HttpReq.truckDispatching.mineMonitoringHowYuntaiQuery({ip:data.cameraIp}).then((res) => {
if(!res){
let noPtzVideo = document.getElementById('noPtzVideo');
noPtzhls = new Hls();
    noPtzhls.loadSource(data.url);
    noPtzhls.attachMedia(noPtzVideo);
    noPtzhls.on(Hls.Events.MANIFEST_PARSED,function() {
noPtzhls.loadSource(data.url);
noPtzhls.attachMedia(noPtzVideo);
noPtzhls.on(Hls.Events.MANIFEST_PARSED,function() {
noPtzVideo.play();
    });
});
this.isChildren1 = false;
this.isChildren2 = false;
this.isChildren3 = false;
......@@ -344,7 +318,6 @@ export default {
if(noPtzhls != null){
noPtzhls.destroy();
}
}
})
} else if (data.brand == 2) {
......@@ -381,8 +354,7 @@ export default {
}
},
getDaHua() {
httpGet(mainCameraDetail, { page: 0, size: 100 }).then((res) => {
let that = this;
HttpReq.truckDispatching.mineMonitoringCameraQuery({page:0,size:100}).then((res) => {
let dahua = [];
res.content.forEach(function (item) {
if (item.brand == 2) {
......@@ -390,7 +362,7 @@ export default {
}
});
this.dahuaData = dahua;
});
})
},
upPage() {
let that = this;
......@@ -505,14 +477,17 @@ export default {
background-color: #fffef9;
color: #333;
text-align: center;
padding: 0;
margin-bottom: 0px;
}
.el-main {
background-color: white;
color: #333;
text-align: center;
height: 86vh;
height: 79vh;
overflow:hidden;
width: 73vw;
}
.el-tree-node__content {
......
src/components/ezuikit/carsEZUIKitJs.vue 0 → 100644
View file @ c3170788
<template>
<div>
<el-container>
<el-header style="font-size: 20px; font-weight: bold">
卡车调度系统车辆监控视频
</el-header>
<el-container>
<el-aside width="230px" style="height: 79vh">
<el-tree
:data="videoData"
:props="defaultProps"
@node-click="handleNodeClick"
accordion
>
<div slot-scope="{ node }">
<span>
<i class="el-icon-video-camera-solid"> {{ node.label }}</i>
</span>
</div>
</el-tree>
</el-aside>
<el-main id="elMain">
<div v-if="isChildren1" class="iframeList">
<div v-for="(item,index) in itemList" :key="index" class="videoChildren">
<video :ref="item.ref" width="330" height="200" muted autoplay class="twelveVideo"></video>
</div>
</div>
<div v-if="btnChildren" class="btn1">
<el-button
:disabled="up"
@click="upPage"
style="background-color: #7bbfea; color: white"
>上一页</el-button
><el-button
:disabled="down"
@click="downPage"
style="background-color: #7bbfea; color: white"
>下一页</el-button
>
</div>
<div v-if="isChildren2">
<iframe :src="url" class="iframeSingle"></iframe>
</div>
<div v-show="noPtz">
<video id="noPtzVideo" width="1378" muted autoplay></video>
</div>
<div v-show="isChildren3" class="dahuaViews"></div>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
// import Hls from "hls.js"
// import EZUIKit from "ezuikit-js";
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
var noPtzhls = null;
export default {
data() {
return {
videoData: [],
defaultProps: {
children: "children",
label: "label",
},
itemList: [],
itemListNext: [],
itemListMiddleman: [],
isChildren1: true,
isChildren2: false,
isChildren3: false,
btnChildren: false,
isIP: "",
// url: "http://127.0.0.1:5500/webs/cn/demo.html",
// url1: "http://127.0.0.1:5500/webs/cn/demo1.html",
url:"http://192.168.9.2:85/cn/demo.html?ip=",
url1:"http://192.168.9.2:85/cn/demo",
dahuaData: [],
up: true,
down: false,
accessToken:"",
noPtz:false,
};
},
mounted() {
this.getCode();
//this.getDaHua();
//this.getAccessToken();
},
methods: {
getAccessToken() {
let param = {};
HttpReq.truckDispatching.mineMonitoringGetTokenaQuery(param).then((res) => {
this.accessToken = res.data.accessToken;
})
},
getCode() {
//分区数据
HttpReq.truckDispatching.carMonitoringFleetQuery({size: 999}).then((res) => {
let data1 = [];
res.content.forEach((item) => {
item.label = item.name;
data1.push(item);
});
if (res != "") {
//总摄像头数据
HttpReq.truckDispatching.carMonitoringCarsQuery({size: 999}).then((res) => {
let fenquName = [];
res.content.forEach((item,index) => {
item.ref = "video" + index;
item.hls = null;
item.label = item.car + '/' + item.carnumber;
fenquName.push(item);
});
data1.forEach((item) => {
item.children = [];
fenquName.forEach((itemSon,index)=>{
if(item.id == itemSon.motorcadeId){
item.children.push(itemSon);
}
})
});
this.videoData = data1;
console.log(this.videoData);
})
}
})
},
handleNodeClick(data) {
console.log(data);
let that = this;
if (data.children) {
if (data.children[0].motorcadeId == 1) {
let temporaryData1 = [];
let temporaryData2 = [];
if (data.children.length > 12) {
for (let i = 0; i < 12; i++) {
temporaryData1.push(data.children[i]);
}
for (let j = 12; j < data.children.length; j++) {
temporaryData2.push(data.children[j]);
}
this.itemList = temporaryData1;
this.itemListNext = temporaryData2;
this.btnChildren = true;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
item.hls.loadSource(item.url)
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play();
});
})
})
if(noPtzhls != null){
noPtzhls.destroy();
}
} else {
this.btnChildren = false;
this.itemList = data.children;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
item.hls.loadSource(item.url)
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play();
});
})
})
if(noPtzhls != null){
noPtzhls.destroy();
}
}
this.isChildren1 = true;
this.isChildren2 = false;
this.isChildren3 = false;
this.up = true;
this.down = false;
this.noPtz = false;
//改变视频大小
this.$nextTick(()=>{
this.winSize();
})
} else if (data.children[0].motorcadeId == 2) {
this.isChildren1 = false;
this.isChildren2 = false;
this.isChildren3 = true;
this.btnChildren = false;
this.noPtz = false;
if(noPtzhls != null){
noPtzhls.destroy();
}
let dahuaViews = document.querySelector(".dahuaViews");
dahuaViews.innerHTML = `<div><div id="dahuaVideo0"></div></div>
<div><div id="dahuaVideo1"></div></div>
<div><div id="dahuaVideo2"></div></div>
<div><div id="dahuaVideo3"></div></div>`;
var player = this.$cyberplayerJs(`dahuaVideo0`).setup({
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[0].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
});
var player = this.$cyberplayerJs(`dahuaVideo1`).setup({
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[1].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
});
var player = this.$cyberplayerJs(`dahuaVideo2`).setup({
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[2].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
});
var player = this.$cyberplayerJs(`dahuaVideo3`).setup({
width: 340, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 210, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: that.dahuaData[3].url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
});
}
} else {
this.btnChildren = false;
if (data.motorcadeId == 1) {
HttpReq.truckDispatching.mineMonitoringHowYuntaiQuery({ip:data.cameraIp}).then((res) => {
if(!res){
let noPtzVideo = document.getElementById('noPtzVideo');
noPtzhls = new Hls();
noPtzhls.loadSource(data.url);
noPtzhls.attachMedia(noPtzVideo);
noPtzhls.on(Hls.Events.MANIFEST_PARSED,function() {
noPtzVideo.play();
});
this.isChildren1 = false;
this.isChildren2 = false;
this.isChildren3 = false;
this.btnChildren = false;
this.noPtz = true;
}else{
this.url = "";
let originalUrl = "http://192.168.9.2:85/cn/demo.html?ip=";
// let originalUrl = "http://127.0.0.1:5500/webs/cn/demo.html?ip=";
this.isChildren1 = false;
this.isChildren2 = true;
this.isChildren3 = false;
this.isIP = data.cameraIp;
this.url = originalUrl + data.cameraIp;
this.btnChildren = false;
this.noPtz = false;
if(noPtzhls != null){
noPtzhls.destroy();
}
}
})
} else if (data.motorcadeId == 2) {
this.isChildren1 = false;
this.isChildren2 = false;
this.isChildren3 = true;
this.btnChildren = false;
this.noPtz = false;
if(noPtzhls != null){
noPtzhls.destroy();
}
let dahuaViews = document.querySelector(".dahuaViews");
dahuaViews.innerHTML = '<div id="dahuaVideoAlone"></div>';
var player = this.$cyberplayerJs(`dahuaVideoAlone`).setup({
width: 1390, // 宽度，也可以支持百分比（不过父元素宽度要有）
height: 760, // 高度，也可以支持百分比
title: "", // 标题
isLive: true, // 必须设置，表明是直播视频
file: data.url, //您的视频源的地址（目前是乐橙示例播放地址）
image: "", // 预览图
autostart: true, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量，注：仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: false, // 是否显示控制栏
hls: {
reconnecttime: 5, // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57", // 百度智能云平台注册（https://cloud.baidu.com）即可获得accessKey
});
}
}
},
getDaHua() {
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100}).then((res) => {
let dahua = [];
res.content.forEach(function (item) {
if (item.motorcadeId == 2) {
dahua.push(item);
}
});
this.dahuaData = dahua;
})
},
upPage() {
let that = this;
this.up = true;
this.down = false;
this.itemList = this.itemListMiddleman;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
item.hls.loadSource(item.url)
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play();
});
})
})
//改变视频大小
this.$nextTick(()=>{
this.winSize();
})
},
downPage() {
let that = this;
this.itemListMiddleman = this.itemList;
this.itemList = [];
this.up = false;
this.down = true;
this.itemList = this.itemListNext;
this.$nextTick(()=>{
this.itemList.forEach(function(item,index){
item.hls = new Hls();
item.hls.loadSource(item.url)
item.hls.attachMedia(that.$refs[item.ref][0]);
item.hls.on(Hls.Events.MANIFEST_PARSED,function() {
that.$refs[item.ref][0].play();
});
})
})
//改变视频大小
this.$nextTick(()=>{
this.winSize();
})
},
//监控el-main大小
winSize(){
let elMain = document.getElementById('elMain');
let elMainWight = parseInt(getComputedStyle(elMain).width) ;
if(elMainWight > 1650){
let twelveVideo = document.getElementsByClassName('twelveVideo');
for(let i = 0;i < twelveVideo.length;i++){
twelveVideo[i].width = 450;
twelveVideo[i].height = 320;
}
}
}
},
// 销毁
destroyed() {
this.itemList.forEach(function(item,index){
item.hls.destroy();
})
if(noPtzhls != null){
noPtzhls.destroy();
}
}
};
</script>
<style>
.mianBodysSon{
width: 100%;
display:flex;
flex-wrap:wrap;
justify-content: center;
}
.btn1 {
position: absolute;
top: 92%;
left: 57%;
}
.dahuaViews {
display: flex;
flex-wrap: wrap;
margin-left: 5px;
}
.dahuaViews>div{
margin-left: 1px;
border: 1px greenyellow solid;
}
.videoChildren {
scrollbar-width: none;
}
.el-header,
.el-footer {
background-color: #7bbfea;
color: white;
text-align: center;
letter-spacing: 10px;
font-size: 25px !important;
line-height: 60px;
}
.el-aside::-webkit-scrollbar {
display: none;
}
.el-aside {
scrollbar-width: none;
}
.el-aside {
background-color: #fffef9;
color: #333;
text-align: center;
padding: 0;
margin-bottom: 0px;
}
.el-main {
background-color: white;
color: #333;
text-align: center;
height: 79vh;
overflow:hidden;
width: 73vw;
}
.el-tree-node__content {
height: 55px;
background-color: #e9eef3;
width: 228px;
}
.el-tree-node {
background-color: #e9eef3;
border: 1px solid #d3d7d4;
}
.el-tree-node__content:hover {
background-color: white;
}
.iframeList {
display: flex;
flex-wrap: wrap;
align-content: center;
padding-left: 25px;
box-sizing: border-box;
}
.iframeList>div{
border: 1px greenyellow solid;
}
.iframeItem {
height: 220px;
width: 340px;
background: #fff;
margin-bottom: 0px;
}
.iframeItem::-webkit-scrollbar {
display: none;
}
.iframeItem {
scrollbar-width: none;
}
@-moz-document url-prefix() {
.iframeItem {
border: 1px solid palegreen;
}
}
.iframeSingle {
width: 1378px;
height: 763px;
}
</style>
src/views/carManagement/carManualScheduling/index.vue → src/views/IntelligentDispatchManagement/carManualScheduling/index.vue
View file @ c3170788
......@@ -223,7 +223,7 @@ import Axios from 'axios'
import EZUIKit from "ezuikit-js";
export default {
name: 'carManualScheduling',
name: 'CarManualScheduling',
components: {
DateRangePicker, cuAmap
},
......
src/views/carManagement/carManualSchedulingManagement/index.vue → src/views/IntelligentDispatchManagement/carManualSchedulingManagement/index.vue
View file @ c3170788
......@@ -223,7 +223,7 @@ import Axios from 'axios'
import EZUIKit from "ezuikit-js";
export default {
name: 'carManualSchedulingManagement',
name: 'CarManualSchedulingManagement',
components: {
DateRangePicker, cuAmap
},
......
src/views/carManagement/carVoiceSupplement/index.vue → src/views/IntelligentDispatchManagement/carVoiceSupplement/index.vue
View file @ c3170788
......@@ -223,7 +223,7 @@ import Axios from 'axios'
import EZUIKit from "ezuikit-js";
export default {
name: 'carVoiceSupplement',
name: 'CarVoiceSupplement',
components: {
DateRangePicker, cuAmap
},
......
src/views/monitoringManagement/carVideo/index.vue
View file @ c3170788
......@@ -5,7 +5,7 @@
</template>
<script>
import EZUIKitJs from '../../../components/ezuikit/EZUIKitJs.vue'
import EZUIKitJs from '../../../components/ezuikit/carsEZUIKitJs.vue'
export default {
components: {
EZUIKitJs
......@@ -15,7 +15,6 @@ export default {
<style scoped>
#app {
background-color: white;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......
src/views/monitoringManagement/mineVideo/index.vue
View file @ c3170788
......@@ -15,7 +15,6 @@ export default {
<style scoped>
#app {
background-color: white;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
......
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