1.外网访问

2.昆船连接调整为30秒每次
3.球机查看放单独的模块管理
4.
dongguan-华为云
LAPTOP-S9HJSOEB\昊天 2 years ago
parent 8252e2aa26
commit c684394339

@ -9,6 +9,7 @@
"start": "node antdTheme.js && npm run serve"
},
"dependencies": {
"@ant-design/icons-vue": "^7.0.1",
"ant-design-vue": "^1.6.3",
"antd-theme-generator": "^1.2.8",
"axios": "^0.19.2",

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -1,4 +1,5 @@
<template>
<a-layout-sider :class="['aside', collapsed ? 'merge' :'']" v-model="collapsed" theme="dark" :trigger="null" collapsible :style="styles.menu.default">
<div class="logo" :style="styles.title.style">
<!-- <img src="@/assets/logo1.png" alt />-->
@ -71,7 +72,13 @@ export default {
parents = this.$router.options.routes[0].children.filter(ele => {
if (
this.userInfo.permissionList.some(item => {
return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0 && item.rights === ele.name && ele.name.indexOf("realTimeMonitoringModel") < 0 && item.rights === ele.name && ele.name.indexOf("plcStatus") < 0 && item.rights === ele.name && ele.name.indexOf("cameraManageModel") < 0 && item.rights === ele.name && ele.name.indexOf("checkOperation") < 0;
return item.rights === ele.name && ele.name.indexOf("center") < 0
&& item.rights === ele.name && ele.name.indexOf("ioTable") < 0
&& item.rights === ele.name && ele.name.indexOf("realTimeMonitoringModel") < 0
&& item.rights === ele.name && ele.name.indexOf("plcStatus") < 0
&& item.rights === ele.name && ele.name.indexOf("cameraManageModel") < 0
&& item.rights === ele.name && ele.name.indexOf("checkOperation") < 0
&& item.rights === ele.name && ele.name.indexOf("deviceManageModel") < 0;
})
) {
return ele;
@ -92,7 +99,14 @@ export default {
recursionRoute(parents);
}else {
parents = this.$router.options.routes[0].children.filter(item => {
return !item.name.startsWith("center") && !item.name.startsWith("ioTable") && !item.name.startsWith("realTimeMonitoringModel") && !item.name.startsWith("plcStatus") && !item.name.startsWith("cameraManageModel") && !item.name.startsWith("checkOperation") && !item.name.startsWith("stockLog") ;
return !item.name.startsWith("center")
&& !item.name.startsWith("ioTable")
&& !item.name.startsWith("realTimeMonitoringModel")
&& !item.name.startsWith("plcStatus")
&& !item.name.startsWith("cameraManageModel")
&& !item.name.startsWith("deviceManageModel")
&& !item.name.startsWith("checkOperation")
&& !item.name.startsWith("stockLog") ;
});
}
this.routes = parents;

@ -65,7 +65,7 @@ export default {
const that = this
setInterval(function () {
that.getplcStatus()
}, 10000)
}, 300000)
},
methods: {
...mapMutations(["setState"]),

@ -22,204 +22,210 @@ VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const routes = [{
path: '/',
redirect: {
name: 'realTimeMonitoring'
},
component: () => import('@/views/index'),
children: [
{
path: 'videoWall1`',
name: 'videoWall1`',
meta: {
icon: 'desktop',
name: '视频墙1'
},
component: () => import('@/views/videoWall/index'),
const routes = [
{
path: '/',
redirect: {
name: 'realTimeMonitoring'
},
{
path: 'videoWall2',
name: 'videoWall2',
meta: {
icon: 'desktop',
name: '视频墙2'
component: () => import('@/views/index'),
children: [
{
path: 'videoWall1`',
name: 'videoWall1`',
meta: {
icon: 'desktop',
name: '视频墙1'
},
component: () => import('@/views/videoWall/index'),
},
component: () => import('@/views/videoWall2/index'),
},
{
path: 'videoWall3',
name: 'videoWall3',
meta: {
icon: 'desktop',
name: '视频墙3'
{
path: 'videoWall2',
name: 'videoWall2',
meta: {
icon: 'desktop',
name: '视频墙2'
},
component: () => import('@/views/videoWall2/index'),
},
component: () => import('@/views/videoWall3/index'),
},
{
path: 'realTimeMonitoring',
name: 'realTimeMonitoring',
meta: {
icon: 'video-camera',
name: '实时视频流'
{
path: 'videoWall3',
name: 'videoWall3',
meta: {
icon: 'desktop',
name: '视频墙3'
},
component: () => import('@/views/videoWall3/index'),
},
component: () => import('@/views/realTimeMonitoring/index'),
{
path: 'realTimeMonitoring',
name: 'realTimeMonitoring',
meta: {
icon: 'video-camera',
name: '实时视频流'
},
component: () => import('@/views/realTimeMonitoring/index'),
},
{
path: 'historyMonitoring',
name: 'historyMonitoring',
meta: {
icon: 'book',
name: '历史数据'
},
component: () => import('@/views/historyMonitoring/index')
},
{
path: 'alarmLog',
name: 'alarmLog',
meta: {
icon: 'eye',
name: '告警日志'
{
path: 'historyMonitoring',
name: 'historyMonitoring',
meta: {
icon: 'book',
name: '历史数据'
},
component: () => import('@/views/historyMonitoring/index')
},
component: () => import('@/views/alarmVideos/alarmLog')
},
{
path: 'checkManage',
name: 'checkManage',
meta: {
icon: 'form',
name: '盘点管理',
{
path: 'alarmLog',
name: 'alarmLog',
meta: {
icon: 'eye',
name: '告警日志'
},
component: () => import('@/views/alarmVideos/alarmLog')
},
component: () => import('@/views/checkManage/index'),
},
{
path: 'checkOperation',
name: 'checkOperation',
meta: {
name: '盘点操作'
{
path: 'checkManage',
name: 'checkManage',
meta: {
icon: 'form',
name: '盘点管理',
},
component: () => import('@/views/checkManage/index'),
},
component: () => import('@/views/checkManage/checkOperation'),
},
{
path: 'checkHistory',
name: 'checkHistory',
meta: {
icon: 'tag',
name: '盘点历史',
{
path: 'checkOperation',
name: 'checkOperation',
meta: {
name: '盘点操作'
},
component: () => import('@/views/checkManage/checkOperation'),
},
component: () => import('@/views/historyCheck/index'),
},
// {
// path: 'stockHistory',
// name: 'stockHistory',
// meta: {
// icon: 'file-excel',
// name: '库位历史',
// },
// component: () => import('@/views/stockLog/index'),
// },
// {
// path: 'stockLogDetail',
// name: 'stockLogDetail',
// meta: {
// name: '库位历史详情',
// },
// component: () => import('@/views/stockLog/logPage'),
// },
{
path: 'roadwayManage',
name: 'roadwayManage',
meta: {
icon: 'build',
name: '巷道管理'
{
path: 'checkHistory',
name: 'checkHistory',
meta: {
icon: 'tag',
name: '盘点历史',
},
component: () => import('@/views/historyCheck/index'),
},
component: () => import('@/views/roadwayManage/index')
},
{
path: 'cameraManage',
name: 'cameraManage',
meta: {
icon: 'camera',
name: '球机管理'
// {
// path: 'stockHistory',
// name: 'stockHistory',
// meta: {
// icon: 'file-excel',
// name: '库位历史',
// },
// component: () => import('@/views/stockLog/index'),
// },
// {
// path: 'stockLogDetail',
// name: 'stockLogDetail',
// meta: {
// name: '库位历史详情',
// },
// component: () => import('@/views/stockLog/logPage'),
// },
{
path: 'roadwayManage',
name: 'roadwayManage',
meta: {
icon: 'build',
name: '巷道管理'
},
component: () => import('@/views/roadwayManage/index')
},
component: () => import('@/views/cameraManage/index')
},
{
path: 'cameraManage/model',
name: 'cameraManageModel',
meta: {
name: '球机管理测试or配置'
{
path: 'cameraManage',
name: 'cameraManage',
meta: {
icon: 'camera',
name: '球机管理'
},
component: () => import('@/views/cameraManage/index')
},
component: () => import('@/views/cameraManage/model')
},
// {
// path: 'productSpecManage',
// name: 'productSpecManage',
// meta: {
// icon: 'pushpin',
// name: '品规管理'
// },
// component: () => import('@/views/productSpecManage/index')
// },
// {
// path: 'repertoryManage',
// name: 'repertoryManage',
// meta: {
// icon: 'wallet',
// name: '库存管理'
// },
// component: () => import('@/views/repertoryManage/index')
// },
{
path: 'cameraManage/ioTable',
name: 'ioTable',
meta: {
name: 'IO表配置'
{
path: 'cameraManage/model',
name: 'cameraManageModel',
meta: {
name: '球机管理测试or配置'
},
component: () => import('@/views/cameraManage/model')
},
component: () => import('@/views/cameraManage/ioTable')
},
{
path: 'center',
name: 'center',
meta: {
name: '个人中心'
// {
// path: 'productSpecManage',
// name: 'productSpecManage',
// meta: {
// icon: 'pushpin',
// name: '品规管理'
// },
// component: () => import('@/views/productSpecManage/index')
// },
// {
// path: 'repertoryManage',
// name: 'repertoryManage',
// meta: {
// icon: 'wallet',
// name: '库存管理'
// },
// component: () => import('@/views/repertoryManage/index')
// },
{
path: 'cameraManage/ioTable',
name: 'ioTable',
meta: {
name: 'IO表配置'
},
component: () => import('@/views/cameraManage/ioTable')
},
component: () => import('@/views/center')
},
{
path: 'plcStatus',
name: 'plcStatus',
meta: {
name: 'PLC状态'
{
path: 'center',
name: 'center',
meta: {
name: '个人中心'
},
component: () => import('@/views/center')
},
component: () => import('@/views/plcStatus')
}
]
},
{
path: '/login',
name: 'login',
component: () => import('../views/login.vue')
},
{
path: '/guide',
name: 'guide',
component: () => import('../views/guide.vue')
},
{
path: '/updateStyles',
name: '修改样式',
component: () => import('../views/updateStyles/index')
},
{
path: 'plcStatus',
name: 'plcStatus',
meta: {
name: 'PLC状态'
},
component: () => import('@/views/plcStatus')
}
]
},
{
path: '/login',
name: 'login',
component: () => import('@/views/login.vue')
},
{
path: '/guide',
name: 'guide',
component: () => import('../views/guide.vue')
},
{
path: '/updateStyles',
name: '修改样式',
component: () => import('../views/updateStyles/index')
},
{
path: '*',
name: '404',
component: () => import('../views/404.vue')
}
{
path: '/camera/*',
name: '修改样式',
component: () => import('../views/camera.vue')
},
{
path: '*',
name: '404',
component: () => import('../views/404.vue')
}
]
const router = new VueRouter({

@ -0,0 +1,627 @@
<template>
<div style="position: relative;width: 700px;height: 576px;">
<video
:style="{ height: videoHeight,}"
:id="`camera${id}`"
autoplay
muted
controls
>
</video>
<div class="operation-list">
<div class="operation-item">
<img
:src="zoomSubUrl"
alt=""
@mousedown=zoomDecStart($event,id)
@mouseleave=zoomDecStop($event,id)
>
<span>变倍</span>
<img
:src="zoomAddUrl"
alt=""
@mousedown=zoomAddStart($event,id)
@mouseleave=zoomAddStop($event,id)
>
</div>
<div class="operation-item">
<img
:src="focusSubUrl"
alt=""
@mousedown=focusDecStart($event,id)
@mouseleave=focusDecStop($event,id)
@mouseup=focusDecStop($event,id)
>
<span>变焦</span>
<img
:src="focusAddUrl"
alt=""
@mousedown=focusAddStart($event,id)
@mouseleave=focusAddStop($event,id)
@mouseup=focusAddStop($event,id)
>
</div>
<div class="operation-item">
<img
:src="irisSubUrl"
alt=""
@mousedown=irisDecStart($event,id)
@mouseup=irisDecStop($event,id)
@mouseleave=irisDecStop($event,id)
>
<span>光圈</span>
<img
:src="irisAddUrl"
alt=""
@mousedown=irisAddStart($event,id)
@mouseup=irisAddStop($event,id)
@mouseleave=irisAddStop($event,id)
>
</div>
</div>
<div class="direction-list">
<div class="direction-item">
<img
:src="leftUpUrl"
alt=""
@mousedown=leftUpStart($event,id)
@mouseup=leftUpStop($event,id)
@mouseleave=leftUpStop($event,id)
>
<img
:src="upUrl"
alt=""
@mousedown=upStart($event,id)
@mouseup=upStop($event,id)
@mouseleave=upStop($event,id)
>
<img
:src="rightUpUrl"
alt=""
@mousedown=rightUpStart($event,id)
@mouseup=rightUpStop($event,id)
@mouseleave=rightUpStop($event,id)
>
</div>
<div class="direction-item">
<img
:src="leftUrl"
alt=""
@mousedown=leftStart($event,id)
@mouseup=leftStop($event,id)
@mouseleave=leftStop($event,id)
>
<img
:src="cameraUrl"
alt=""
webkitdirectory
@mouseup=photograph($event,id)
>
<img
:src="rightUrl"
alt=""
@mousedown=rightStart($event,id)
@mouseup=rightStop($event,id)
@mouseleave=rightStop($event,id)
>
</div>
<div class="direction-item">
<img
:src="leftDownUrl"
alt=""
@mousedown=leftDownStart($event,id)
@mouseup=leftDownStop($event,id)
@mouseleave=leftDownStop($event,id)
>
<img
:src="downUrl"
alt=""
@mousedown=downStart($event,id)
@mouseup=downStop($event,id)
@mouseleave=downStop($event,id)
>
<img
:src="rightDownUrl"
alt=""
@mousedown=rightDownStart($event,id)
@mouseup=rightDownStop($event,id)
@mouseleave=rightDownStop($event,id)
>
</div>
</div>
</div>
</template>
<script>
import WebRtcPlayer from "../../public/static/webrtcplayer";
export default {
data() {
return {
w:
document.documentElement.offsetWidth ||
document.body.offsetWidth,
h:
document.documentElement.offsetHeight ||
document.body.offsetHeight,
confirmLoading: false,
videoHeight: "576px",
id: "12",
mdata: [],
camera:{},
zoomSubUrl: require("@/assets/sub-icon.png"),
zoomAddUrl: require("@/assets/add-icon.png"),
focusSubUrl: require("@/assets/sub-icon.png"),
focusAddUrl: require("@/assets/add-icon.png"),
irisSubUrl: require("@/assets/sub-icon.png"),
irisAddUrl: require("@/assets/add-icon.png"),
leftUpUrl: require("@/assets/left-up-icon.png"),
upUrl: require("@/assets/up-icon.png"),
rightUpUrl: require("@/assets/right-up-icon.png"),
cameraUrl: require("@/assets/camera.png"),
leftUrl: require("@/assets/left-icon.png"),
rightUrl: require("@/assets/right-icon.png"),
leftDownUrl: require("@/assets/left-down-icon.png"),
downUrl: require("@/assets/down-icon.png"),
rightDownUrl: require("@/assets/right-down-icon.png"),
vlcm: "",
};
},
comments: {
WebRtcPlayer,
},
mounted() {
this.mdata = this.$route.path;
console.log(this.mdata);
this.id = this.mdata.toString().split("/").pop();
this.$axios
.get("/camera/" + this.id, {
data: {},
})
.then((res) => {
this.camera = res.data;
console.log( this.camera);
this.autoPlay();
})
.catch((err) => {});
},
// beforeRouteLeave(to, form, next) {
// if (this.vlcm) {
// this.vlcm.playlist.stop();
// next(true)
// } else {
// next(true)
// }
// },
destroy() {
if (this.player != null) {
this.player.destroy();
}
},
methods: {
autoPlay() {
this.players = [];
let video = document.getElementById("camera" + this.id);
if (video) {
console.log("play:" + this.id);
let server ;
if(this.camera.rtcServerPort != null){
server= this.camera.rtcServer + ":" + this.camera.rtcServerPort ;
}else{
server= this.camera.rtcServer
}
let player = new WebRtcPlayer(
server,
video,
"camera" + this.id
);
this.players.push(player);
}
},
handleCancel() {
this.$router.push({ name: "realTimeMonitoring" });
},
getHdVideos(rtsp) {
this.$nextTick(() => {
var vlc = document.getElementById("video");
var options = new Array(":network-caching=100"); //
var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
vlc.playlist.playItem(vlcItem);
this.vlcm = vlc;
});
},
zoomDecStart() {
console.log("变倍-按下");
this.zoomSubUrl = require("@/assets/sub-active-icon.png");
this.$axios
.post("/camera/control/zoomDec/start/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
zoomDecStop() {
console.log("变倍-抬起");
this.zoomSubUrl = require("@/assets/sub-icon.png");
this.$axios
.post("/camera/control/zoomDec/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
zoomAddStart() {
console.log("变倍+按下");
this.zoomAddUrl = require("@/assets/add-active-icon.png");
this.$axios
.post("/camera/control/zoomAdd/start/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
zoomAddStop() {
console.log("变倍+抬起");
this.zoomAddUrl = require("@/assets/add-icon.png");
this.$axios
.post("/camera/control/zoomAdd/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
focusDecStart() {
console.log("变焦-按下");
this.focusSubUrl = require("@/assets/sub-active-icon.png");
this.$axios
.post("/camera/control/focusDec/start/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
focusDecStop() {
console.log("变焦-抬起");
this.focusSubUrl = require("@/assets/sub-icon.png");
this.$axios
.post("/camera/control/focusDec/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
focusAddStart() {
console.log("变焦+按下");
this.focusAddUrl = require("@/assets/add-active-icon.png");
this.$axios
.post("/camera/control/focusAdd/start/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
focusAddStop() {
console.log("变焦+抬起");
this.focusAddUrl = require("@/assets/add-icon.png");
this.$axios
.post("/camera/control/focusAdd/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
irisDecStart() {
console.log("光圈-按下");
this.irisSubUrl = require("@/assets/sub-active-icon.png");
this.$axios
.post("/camera/control/irisDec/start/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
irisDecStop() {
console.log("光圈-抬起");
this.irisSubUrl = require("@/assets/sub-icon.png");
this.$axios
.post("/camera/control/irisDec/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
irisAddStart() {
console.log("光圈+按下");
this.irisAddUrl = require("@/assets/add-active-icon.png");
this.$axios
.post("/camera/control/irisAdd/start/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
irisAddStop() {
console.log("光圈+抬起");
this.irisAddUrl = require("@/assets/add-icon.png");
this.$axios
.post("/camera/control/irisAdd/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
leftUpStart() {
console.log("左上鼠标按下");
this.leftUpUrl = require("@/assets/left-up-active-icon.png");
this.$axios
.post("/camera/control/leftUp/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
leftUpStop() {
console.log("左上鼠标抬起");
this.leftUpUrl = require("@/assets/left-up-icon.png");
this.$axios
.post("/camera/control/leftUp/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
upStart() {
console.log("上鼠标按下");
this.upUrl = require("@/assets/up-active-icon.png");
this.$axios
.post("/camera/control/up/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
upStop() {
console.log("上鼠标抬起");
this.upUrl = require("@/assets/up-icon.png");
this.$axios
.post("/camera/control/up/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
rightUpStart() {
console.log("右上鼠标按下");
this.rightUpUrl = require("@/assets/right-up-active-icon.png");
this.$axios
.post("/camera/control/rightUp/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
rightUpStop() {
console.log("右上鼠标抬起");
this.rightUpUrl = require("@/assets/right-up-icon.png");
this.$axios
.post("/camera/control/rightUp/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
leftStart() {
// console.log(this.id)
console.log("左转鼠标按下");
this.leftUrl = require("@/assets/left-active-icon.png");
this.$axios
.post("/camera/control/left/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
leftStop() {
this.leftUrl = require("@/assets/left-icon.png");
console.log("左转鼠标抬起");
this.$axios
.post("/camera/control/left/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
rightStart() {
console.log("右转鼠标按下");
this.rightUrl = require("@/assets/right-active-icon.png");
this.$axios
.post("/camera/control/right/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
rightStop() {
console.log("右转鼠标抬起");
this.rightUrl = require("@/assets/right-icon.png");
this.$axios
.post("/camera/control/right/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
leftDownStart() {
console.log("左下鼠标按下");
this.leftDownUrl = require("@/assets/left-down-active-icon.png");
this.$axios
.post("/camera/control/leftDown/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
leftDownStop() {
console.log("左下鼠标抬起");
this.leftDownUrl = require("@/assets/left-down-icon.png");
this.$axios
.post("/camera/control/leftDown/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
downStart() {
console.log("下鼠标按下");
this.downUrl = require("@/assets/down-active-icon.png");
this.$axios
.post("/camera/control/down/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
downStop() {
console.log("下鼠标抬起");
this.downUrl = require("@/assets/down-icon.png");
this.$axios
.post("/camera/control/down/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
rightDownStart() {
console.log("右下鼠标按下");
this.rightDownUrl = require("@/assets/right-down-active-icon.png");
this.$axios
.post("/camera/control/rightDown/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
rightDownStop() {
console.log("右下鼠标抬起");
this.rightDownUrl = require("@/assets/right-down-icon.png");
this.$axios
.post("/camera/control/rightDown/stop/" + this.id, {
data: {},
})
.then((res) => {})
.catch((err) => {});
},
photograph() {
//使 HTMLCanvasElement JavaScript canvas 使 drawImage
const video = document.querySelector("video");
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
// video canvas
const width = video.videoWidth;
const height = video.videoHeight;
canvas.width = width;
canvas.height = height;
//
context.drawImage(video, 0, 0, width, height);
//
canvas.toBlob((blob) => {
//
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "screenshot.png";
document.body.appendChild(a);
a.click();
}, "image/png");
},
},
};
</script>
<style lang="scss" scoped>
.realTime {
padding: 10px;
}
//
//
video::-webkit-media-controls-play-button {
display: none;
}
//
video::-webkit-media-controls-timeline {
display: none;
}
//
video::-webkit-media-controls-current-time-display {
display: none;
}
//
video::-webkit-media-controls-time-remaining-display {
display: none;
}
//
video::-webkit-media-controls-mute-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
//
video::-webkit-media-controls-volume-slider {
display: none;
}
//
video::-webkit-media-controls-enclosure {
display: none;
}
.operation-list {
position: absolute;
right: 200px;
bottom: 20px;
/*width: 150px;*/
/*border: solid 1px blue;*/
z-index: 10;
.operation-item {
img {
width: 32px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
span {
padding: 3px 6px;
background: rgba(0, 0, 0, 0.5);
font-size: 16px;
color: #ffffff;
}
}
}
.direction-list {
position: absolute;
right: 30px;
bottom: 20px;
width: 150px;
z-index: 10;
/*border: solid 1px blue;*/
.direction-item {
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 32px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
}
}
</style>

@ -354,6 +354,7 @@ export default {
if(this.type=='test') {
this.$router.go(-1);
}else if(this.type=='config') {
this.$router.go(-1);
this.player.destroy();
}
@ -363,8 +364,14 @@ export default {
autoPlay(id){
let video = document.getElementById('config-camera'+id);
if(video){
let server = this.mdata.rtcServer+":"+this.mdata.rtcServerPort
console.log("server:"+server)
let server ;
if(this.mdata.rtcServerPort != null){
server= this.mdata.rtcServer+":"+this.mdata.rtcServerPort
}else{
server= this.mdata.rtcServer
}
let player = new WebRtcPlayer(server,video,'camera'+id);
console.log("okkkkkk")
//player.load('camera'+id);

@ -0,0 +1,846 @@
<template>
<div v-if="isShow">
<template v-if="type=='add' || type=='edit'">
<a-modal
v-model="isShow"
:title="[type =='add' ? '新增球机':'编辑球机']"
:closable="closable"
@ok="handleOk"
@cancel="handleCancel"
ok-text="确认"
cancel-text="取消"
class="add-edit-model"
>
<a-form
:form="form"
:wrapper-col="formItemAcrossLayout.wrapperCol"
>
<a-form-item label="球机名称" :label-col="formItemVerticalLayout.labelCol">
<a-input
v-decorator="['name', { rules: [{ required: true, message: '请输入球机名称!' }] }]"
/>
</a-form-item>
<a-form-item label="cpe设备IP" :label-col="formItemVerticalLayout.labelCol">
<a-input
v-decorator="['ip', { rules: [{ required: true, message: '请输入cpe设备ip!' }] }]"
/>
</a-form-item>
<a-form-item label="球机端口" :label-col="formItemVerticalLayout.labelCol">
<a-input
v-decorator="['port', { rules: [{ required: true, message: '请输入球机端口!' }] }]"
/>
</a-form-item>
<a-form-item label="rtsp端口" :label-col="formItemVerticalLayout.labelCol">
<a-input
v-decorator="['rtspPort', { rules: [{ required: true, message: '请输入rtsp端口!' }] }]"
/>
</a-form-item>
<a-form-item label="视频流IP" :label-col="formItemVerticalLayout.labelCol">
<a-input
v-decorator="['rtcServer']"
/>
</a-form-item>
</a-form>
</a-modal>
</template>
<template v-else-if="type=='config'">
<div>
<a-button type="primary">Primary Button</a-button>
</div>
<a-modal
v-model="isShow"
@cancel="handleCancel"
:footer="null"
:maskClosable="false"
width="1600px"
:bodyStyle="{padding:0,display:'flex'}"
:centered="true"
class="config-model"
>
<video width="900"
height="600"
:id="`config-camera${id}`"
autoplay muted ></video>
<div class="operation-list">
<div class="operation-item">
<img :src="zoomSubUrl" alt="" @mousedown="zoomDecStart"
@mouseup="zoomDecStop" @mouseleave="zoomDecStop">
<span>变倍</span>
<img :src="zoomAddUrl" alt="" @mousedown="zoomAddStart"
@mouseup="zoomAddStop" @mouseleave="zoomAddStop">
</div>
<div class="operation-item">
<img :src="focusSubUrl" alt="" @mousedown="focusDecStart"
@mouseup="focusDecStop" @mouseleave="focusDecStop">
<span>变焦</span>
<img :src="focusAddUrl" alt="" @mousedown="focusAddStart"
@mouseup="focusAddStop" @mouseleave="focusAddStop">
</div>
<div class="operation-item">
<img :src="irisSubUrl" alt="" @mousedown="irisDecStart" @mouseup="irisDecStop" @mouseleave="irisDecStop">
<span>光圈</span>
<img :src="irisAddUrl" alt="" @mousedown="irisAddStart" @mouseup="irisAddStop" @mouseleave="irisAddStop">
</div>
</div>
<div class="direction-list">
<div class="direction-item">
<img :src="leftUpUrl" alt="" @mousedown="leftUpStart" @mouseup="leftUpStop" @mouseleave="leftUpStop">
<img :src="upUrl" alt="" @mousedown="upStart" @mouseup="upStop" @mouseleave="upStop">
<img :src="rightUpUrl" alt="" @mousedown="rightUpStart" @mouseup="rightUpStop" @mouseleave="rightUpStop">
</div>
<div class="direction-item">
<img :src="leftUrl" alt="" @mousedown="leftStart" @mouseup="leftStop" @mouseleave="leftStop">
<img :src="rightUrl" alt="" @mousedown="rightStart" @mouseup="rightStop" @mouseleave="rightStop">
</div>
<div class="direction-item">
<img :src="leftDownUrl" alt="" @mousedown="leftDownStart"
@mouseup="leftDownStop" @mouseleave="leftDownStop">
<img :src="downUrl" alt="" @mousedown="downStart" @mouseup="downStop" @mouseleave="downStop">
<img :src="rightDownUrl" alt="" @mousedown="rightDownStart"
@mouseup="rightDownStop" @mouseleave="rightDownStop">
</div>
</div>
<div class="config-table">
<h2>球机配置</h2>
<a-table
:columns="columns"
:row-key="record => record.name"
:data-source="configData"
@change="getConfigIoList"
bordered
:pagination="false"
:scroll="{y:335}"
>
<span slot="name" slot-scope="text,record">
<a-button type="link" @click="toPtz(record)">{{text}}({{record.code}})</a-button>
</span>
<span slot="position" slot-scope="text, record">
<div v-if="text">
已写入
<a-button type="link" class="plc" @click="coverage(0,record)">
覆盖
</a-button>
</div>
<a-button type="primary" class="plc" v-else @click="coverage(0,record)">
写入
</a-button>
</span>
</a-table>
</div>
</a-modal>
</template>
</div>
</template>
<script>
var formItemAcrossLayout = { //formItemAcrossLayoutitem
labelCol: { span: 8 }, //lable
wrapperCol: { span: 14 }, //input
};
var formItemVerticalLayout = { //formItemVerticalLayoutitem
labelCol: { span: 4 },
wrapperCol: { span: 8, offset: 4 },
};
const columns = [
{
title: 'PLC IO指令',
dataIndex: 'name',
scopedSlots: { customRender: 'name' }
},
{
title: '配置',
dataIndex: 'position',
scopedSlots: { customRender: 'position' }
}
];
import WebRtcPlayer from "../../../public/static/webrtcplayer"
export default {
props:[ 'visible', 'modelType', 'modelData'],
watch: {
//visibleisShowprops
visible: function(newVal){
this.isShow = newVal; //newValvisible
// newVal && this.showConfirm(); //newValshowConfirm
},
modelType: function(newVal){
this.type = newVal;
},
modelData: function(newVal){
// console.log(newVal)
this.mdata=newVal
console.log(this.type)
if(newVal.id && this.type=='edit'){
this.id = newVal.id
// console.log('watch')
this.$nextTick(()=>{ //this.$nextTick
this.form.setFieldsValue({ //setFieldsValue form
name:newVal.name,
ip:newVal.ip,
rtsp:newVal.rtsp,
rtcServer:newVal.rtcServer,
rtcServerPort:newVal.rtcServerPort
})
})
}else if (newVal.id && this.type=='config'){
this.id = newVal.id
this.mdata = newVal
console.log(newVal)
}
},
},
data() {
return {
isShow:false,
player:null,
type:'',
title:'',
closable:false,//modelX
formItemAcrossLayout,
formItemVerticalLayout,
confirmLoading: false,
form: this.$form.createForm(this, { name: 'dynamic_rule' }),
id:'',
mdata:[],
//
zoomSubUrl:require('@/assets/sub-icon.png'),
zoomAddUrl:require('@/assets/add-icon.png'),
focusSubUrl:require('@/assets/sub-icon.png'),
focusAddUrl:require('@/assets/add-icon.png'),
irisSubUrl:require('@/assets/sub-icon.png'),
irisAddUrl:require('@/assets/add-icon.png'),
leftUpUrl:require('@/assets/left-up-icon.png'),
upUrl:require('@/assets/up-icon.png'),
rightUpUrl:require('@/assets/right-up-icon.png'),
leftUrl:require('@/assets/left-icon.png'),
rightUrl:require('@/assets/right-icon.png'),
leftDownUrl:require('@/assets/left-down-icon.png'),
downUrl:require('@/assets/down-icon.png'),
rightDownUrl:require('@/assets/right-down-icon.png'),
columns,
configData:[]
};
},
mounted() {
if (this.$route.query.modelType == 'test') {
this.isShow = true
this.id = this.$route.query.modelData.id
this.type = this.$route.query.modelType
this.mdata = this.$route.query.modelData
this.$nextTick(() => {
this.autoPlay(this.id)
})
} else if (this.$route.query.modelType == 'config') {
this.isShow = true
this.id = this.$route.query.modelData.id
this.getConfigIoList()
this.type = this.$route.query.modelType
this.mdata = this.$route.query.modelData
this.$nextTick(() => {
this.autoPlay(this.id)
})
}
},
destroy(){
if(this.player != null){
this.player.destroy()
}
},
methods: {
handleOk() {
this.confirmLoading = true;
setTimeout(() => {
this.form.validateFields((err, values) => {
console.log(values)
if (!err) {
console.log(this.title)
if(this.type=='add'){
this.$api.httpApi.addCamera({
data:values
}).then(res => {
if(res.code==200){
this.$emit('sure',false)
this.$message.success('新增球机成功');
}
}).catch(err => {
});
}else if(this.type=='edit'){
values.id = this.id
this.$api.httpApi.editCamera({
data:values
}).then(res => {
if(res.code==200){
this.$emit('sure',false)
this.$message.success('编辑球机成功');
}
}).catch(err => {
});
}
}
});
this.confirmLoading = false;
}, 500);
},
handleCancel() {
console.log('Clicked cancel button');
this.$emit('close', false, {})
if(this.type=='test') {
this.$router.go(-1);
}else if(this.type=='config') {
this.$router.go(-1);
this.player.destroy();
}
},
autoPlay(id){
let video = document.getElementById('config-camera'+id);
if(video){
let server ;
if(this.mdata.rtcServerPort != null){
server= this.mdata.rtcServer+":"+this.mdata.rtcServerPort ;
}else{
server= this.mdata.rtcServer
}
console.log("server:"+server)
let player = new WebRtcPlayer(server,video,'camera'+id);
console.log("okkkkkk")
//player.load('camera'+id);
this.player = player
}
},
getConfigIoList(){
this.$axios.post('/camera/'+this.id+'/io/list', {
data: {
}
}).then(res => {
console.log(res)
if(res.code==200){
this.configData=res.data
}
}).catch(err => {
});
},
coverage(type,data){
this.$api.httpApi.writeInCameraIoptz({
data: {
cameraId: this.id,
cameraIOId: data.id,
name: data.name,
code: data.code,
type: type
}
}).then(res => {
this.getConfigIoList()
}).catch(err => {
});
},
toPtz(data){
this.$api.httpApi.cameraIoToPtz({
data: {
cameraId:this.id,
cameraIOId:data.id,
name:data.name,
}
}).then(res => {
console.log(res)
}).catch(err => {
});
},
zoomDecStart(){
console.log('变倍-按下')
this.zoomSubUrl=require('@/assets/sub-active-icon.png')
this.$axios.post('/camera/control/zoomDec/start/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
zoomDecStop(){
console.log('变倍-抬起')
this.zoomSubUrl=require('@/assets/sub-icon.png')
this.$axios.post('/camera/control/zoomDec/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
zoomAddStart(){
console.log('变倍+按下')
this.zoomAddUrl=require('@/assets/add-active-icon.png')
this.$axios.post('/camera/control/zoomAdd/start/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
zoomAddStop(){
console.log('变倍+抬起')
this.zoomAddUrl=require('@/assets/add-icon.png')
this.$axios.post('/camera/control/zoomAdd/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusDecStart(){
console.log('变焦-按下')
this.focusSubUrl=require('@/assets/sub-active-icon.png')
this.$axios.post('/camera/control/focusDec/start/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusDecStop(){
console.log('变焦-抬起')
this.focusSubUrl=require('@/assets/sub-icon.png')
this.$axios.post('/camera/control/focusDec/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusAddStart(){
console.log('变焦+按下')
this.focusAddUrl=require('@/assets/add-active-icon.png')
this.$axios.post('/camera/control/focusAdd/start/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
focusAddStop(){
console.log('变焦+抬起')
this.focusAddUrl=require('@/assets/add-icon.png')
this.$axios.post('/camera/control/focusAdd/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisDecStart(){
console.log('光圈-按下')
this.irisSubUrl=require('@/assets/sub-active-icon.png')
this.$axios.post('/camera/control/irisDec/start/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisDecStop(){
console.log('光圈-抬起')
this.irisSubUrl=require('@/assets/sub-icon.png')
this.$axios.post('/camera/control/irisDec/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisAddStart(){
console.log('光圈+按下')
this.irisAddUrl=require('@/assets/add-active-icon.png')
this.$axios.post('/camera/control/irisAdd/start/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
irisAddStop(){
console.log('光圈+抬起')
this.irisAddUrl=require('@/assets/add-icon.png')
this.$axios.post('/camera/control/irisAdd/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftUpStart(){
console.log('左上鼠标按下')
this.leftUpUrl=require('@/assets/left-up-active-icon.png')
this.$axios.post('/camera/control/leftUp/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftUpStop(){
console.log('左上鼠标抬起')
this.leftUpUrl=require('@/assets/left-up-icon.png')
this.$axios.post('/camera/control/leftUp/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
upStart(){
console.log('上鼠标按下')
this.upUrl=require('@/assets/up-active-icon.png')
this.$axios.post('/camera/control/up/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
upStop(){
console.log('上鼠标抬起')
this.upUrl=require('@/assets/up-icon.png')
this.$axios.post('/camera/control/up/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightUpStart(){
console.log('右上鼠标按下')
this.rightUpUrl=require('@/assets/right-up-active-icon.png')
this.$axios.post('/camera/control/rightUp/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightUpStop(){
console.log('右上鼠标抬起')
this.rightUpUrl=require('@/assets/right-up-icon.png')
this.$axios.post('/camera/control/rightUp/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftStart(){
// console.log(this.id)
console.log('左转鼠标按下')
this.leftUrl=require('@/assets/left-active-icon.png')
this.$axios.post('/camera/control/left/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftStop(){
this.leftUrl=require('@/assets/left-icon.png')
console.log('左转鼠标抬起')
this.$axios.post('/camera/control/left/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightStart(){
console.log('右转鼠标按下')
this.rightUrl=require('@/assets/right-active-icon.png')
this.$axios.post('/camera/control/right/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightStop(){
console.log('右转鼠标抬起')
this.rightUrl=require('@/assets/right-icon.png')
this.$axios.post('/camera/control/right/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftDownStart(){
console.log('左下鼠标按下')
this.leftDownUrl=require('@/assets/left-down-active-icon.png')
this.$axios.post('/camera/control/leftDown/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
leftDownStop(){
console.log('左下鼠标抬起')
this.leftDownUrl=require('@/assets/left-down-icon.png')
this.$axios.post('/camera/control/leftDown/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
downStart(){
console.log('下鼠标按下')
this.downUrl=require('@/assets/down-active-icon.png')
this.$axios.post('/camera/control/down/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
downStop(){
console.log('下鼠标抬起')
this.downUrl=require('@/assets/down-icon.png')
this.$axios.post('/camera/control/down/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightDownStart(){
console.log('右下鼠标按下')
this.rightDownUrl=require('@/assets/right-down-active-icon.png')
this.$axios.post('/camera/control/rightDown/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
rightDownStop(){
console.log('右下鼠标抬起')
this.rightDownUrl=require('@/assets/right-down-icon.png')
this.$axios.post('/camera/control/rightDown/stop/'+this.id, {
data: {}
}).then(res => {
}).catch(err => {
})
},
},
};
</script>
<style lang="scss" scoped>
.add-edit-model{
.across-layout{
display: flex;
}
.ant-divider-horizontal{
margin:6px 0;
}
}
.test-model{
position:fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color:rgba(0,0,0,0.5);
z-index:1000;
display: flex;
align-items: center;
justify-content: center;
#video-test {
width: 100%;
height: 100%;
}
.video-close{
position: absolute;
right: 20px;
top: 20px;
color: #ffffff;
font-size: 24px;
width: 32px;
height: 32px;
background: rgba(0,0,0,0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}
.operation-list{
position: absolute;
right: 200px;
bottom: 20px;
/*width: 150px;*/
/*border: solid 1px blue;*/
z-index: 10;
.operation-item{
img{
width: 42px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
span{
padding: 5px 10px;
background: rgba(0,0,0,0.5);
font-size: 18px;
color: #ffffff;
}
}
}
.direction-list{
position: absolute;
right: 30px;
bottom: 20px;
width: 150px;
z-index: 10;
/*border: solid 1px blue;*/
.direction-item{
display: flex;
align-items: center;
justify-content: space-between;
img{
width: 42px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
}
}
img{
cursor: pointer;
}
}
.config-model{
display: flex;
align-items: center;
justify-content: center;
.operation-list{
position: absolute;
right: 1000px;
bottom: 20px;
/*width: 150px;*/
/*border: solid 1px blue;*/
z-index: 10;
.operation-item{
img{
width: 32px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
span{
padding: 3px 6px;
background: rgba(0,0,0,0.5);
font-size: 16px;
color: #ffffff;
}
}
}
.direction-list{
position: absolute;
right: 830px;
bottom: 20px;
width: 150px;
z-index: 10;
/*border: solid 1px blue;*/
.direction-item{
display: flex;
align-items: center;
justify-content: space-between;
img{
width: 32px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
}
}
img{
cursor: pointer;
}
.config-table {
width: 800px;
height: 600px;
overflow: hidden;
h2 {
padding: 15px;
font-size: 20px;
background: #fafafa;
margin: 0;
}
}
}
.vxgplayer{
border: none;
margin: 0;
display: block;
}
.ant-btn{
white-space: inherit;
text-align: left;
}
</style>

@ -0,0 +1,222 @@
<template>
<div>
<div class="button-box">
<a-button type="primary" class="add" @click="showModel('add','')">
新增球机
</a-button>
<a-button type="primary" class="plc" @click="goIo">
PLC IO表配置
</a-button>
<a-button type="primary" class="add" @click="videoConfig">
视频流配置
</a-button>
</div>
<a-table
style="margin-top:40px"
:columns="columns"
:row-key="record => record.id"
:data-source="data"
:pagination="pagination"
@change="handleGetCameraList"
>
<span slot="action" slot-scope="text, record">
<!-- <a @click="showModel('test',record)">
测试
</a> -->
<a-divider type="vertical"/>
<a @click="showModel('config',record)">
配置
</a>
<a-divider type="vertical"/>
<a @click="showModel('edit',record)">
编辑
</a>
<a-divider type="vertical"/>
<a-popconfirm
title="是否删除?"
@confirm="() => delDosage(record)"
>
<a>删除</a>
</a-popconfirm>
</span>
</a-table>
<Model
:visible.sync="visible"
:modelType="modelType"
:modelData.sync="modelData"
@sure="submit"
@close="closeModel"
/>
</div>
</template>
<script>
import Model from "./model.vue"
const columns = [
{
title: '球机名称',
dataIndex: 'name',
},
{
title: '球机IP',
dataIndex: 'ip',
},
{
title: '视频流IP',
dataIndex: 'rtcServer',
},
{
title: '连接状态',
dataIndex: 'status',
},
{
title: '修改时间',
dataIndex: 'updateTime',
},
{
title: '操作',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
},
];
export default {
data() {
return {
pageNum:1,
pageSize:10,
data: [],
pagination:{
total:0,
defaultPageSize:10, //
showTotal: total => `${total} 条数据`, //
showSizeChanger:true, //
pageSizeOptions: ['10', '20', '30'],
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize //
},
loading: false,
columns,
visible:false,
modelType:'',
modelData:[]
};
},
mounted() {
this.handleGetCameraList()
},
methods: {
handleGetCameraList(pagination) {
if(pagination){
this.pagination.current = pagination.current;
this.pagination.pageSize = pagination.pageSize;
this.pageNum = pagination.current;
this.pageSize = pagination.pageSize;
}
this.request();
},
request(){
this.$api.httpApi.getCameraList({
data: {
pageNum:this.pageNum,
pageSize:this.pageSize,
}
}).then(res => {
const pagination = { ...this.pagination };
pagination.total = res.data.total;
this.data = res.data.list;
this.pagination = pagination;
}).catch(err => {
});
},
showModel(type,data){
console.log(type)
if (type == 'test') {
this.$router.push({
name: 'deviceManageModel',
query: {modelType: type, modelData: data}
})
} else if (type == 'config') {
this.$router.push({
name: 'deviceManageModel',
query: {modelType: type, modelData: data}
})
} else {
this.visible = true
this.modelType = type
this.modelData = data
}
},
submit(visible){
this.visible = visible
this.handleGetCameraList()
},
closeModel(visible,data){
this.visible = visible
this.modelData=data
},
delDosage(data){
console.log(data.id)
var id=data.id
this.$axios.delete('/camera/'+id, {
data: {}
}).then(res => {
if(res.code==200){
this.$message.success('删除球机成功');
this.handleGetCameraList()
}
}).catch(err => {
})
},
goIo(){
this.$router.push({ name: "ioTable"});
},
videoConfig(){
const that = this
this.$confirm({
title: "生成全部视频流",
content: "确认生成全部视频流?",
okText: '确认',
onOk() {
return new Promise((resolve, reject) => {
that.downConfig();
setTimeout(resolve, 1000);
}).catch(() => console.log('Oops errors!'));
},
cancelText: '取消',
});
},
downConfig(){
this.$api.httpApi.videoConfig({
}).then(res => {
}).catch(err => {
});
},
},
components:{
Model
}
};
</script>
<style lang="scss" scoped>
.button-box{
position: absolute;
top:20px;
right: 40px;
display: flex;
align-items: center;
justify-content: center;
.add{
margin-right: 20px;
}
.plc{
margin-right: 20px;
}
}
</style>

@ -0,0 +1,549 @@
<template>
<div v-if="isShow">
<template v-if="type=='add' || type=='edit'">
<a-modal
v-model="isShow"
:title="[type =='add' ? '新增球机':'编辑球机']"
:closable="closable"
@ok="handleOk"
@cancel="handleCancel"
ok-text="确认"
cancel-text="取消"
class="add-edit-model"
>
<a-form
:form="form"
:wrapper-col="formItemAcrossLayout.wrapperCol"
>
<a-form-item
label="球机名称"
:label-col="formItemVerticalLayout.labelCol"
>
<a-input v-decorator="['name', { rules: [{ required: true, message: '!' }] }]" />
</a-form-item>
<a-form-item
label="cpe设备IP"
:label-col="formItemVerticalLayout.labelCol"
>
<a-input v-decorator="['ip', { rules: [{ required: true, message: 'cpeip!' }] }]" />
</a-form-item>
<a-form-item
label="球机端口"
:label-col="formItemVerticalLayout.labelCol"
>
<a-input v-decorator="['port', { rules: [{ required: true, message: '!' }] }]" />
</a-form-item>
<a-form-item
label="rtsp端口"
:label-col="formItemVerticalLayout.labelCol"
>
<a-input v-decorator="['rtspPort', { rules: [{ required: true, message: 'rtsp!' }] }]" />
</a-form-item>
<a-form-item
label="视频流IP"
:label-col="formItemVerticalLayout.labelCol"
>
<a-input v-decorator="['rtcServer']" />
</a-form-item>
</a-form>
</a-modal>
</template>
<template v-else-if="type=='config'">
<a-modal
v-model="isShow"
@cancel="handleCancel"
:footer="null"
:maskClosable="false"
width="1601px"
:bodyStyle="{padding:0}"
:centered="true"
class="config-model"
>
<a-row type="flex">
<a-col :flex="3">
<cameraVue></cameraVue>
<div class="config-table">
<h2>球机配置</h2>
<a-table
:columns="columns"
:row-key="record => record.name"
:data-source="configData"
@change="getConfigIoList"
bordered
:pagination="false"
:scroll="{y:335}"
>
<span
slot="name"
slot-scope="text,record"
>
<a-button
type="link"
@click="toPtz(record)"
>{{text}}({{record.code}})</a-button>
</span>
<span
slot="position"
slot-scope="text, record"
>
<div v-if="text">
已写入
<a-button
type="link"
class="plc"
@click="coverage(0,record)"
>
覆盖
</a-button>
</div>
<a-button
type="primary"
class="plc"
v-else
@click="coverage(0,record)"
>
写入
</a-button>
</span>
</a-table>
</div>
</a-col>
</a-row>
</a-modal>
</template>
</div>
</template>
<script>
var formItemAcrossLayout = {
//formItemAcrossLayoutitem
labelCol: { span: 8 }, //lable
wrapperCol: { span: 14 }, //input
};
var formItemVerticalLayout = {
//formItemVerticalLayoutitem
labelCol: { span: 4 },
wrapperCol: { span: 8, offset: 4 },
};
const columns = [
{
title: "PLC IO指令",
dataIndex: "name",
scopedSlots: { customRender: "name" },
},
{
title: "配置",
dataIndex: "position",
scopedSlots: { customRender: "position" },
},
];
import WebRtcPlayer from "../../../public/static/webrtcplayer";
import cameraVue from "../camera.vue";
export default {
name: "model",
props: ["visible", "modelType", "modelData"],
components: { cameraVue },
watch: {
//visibleisShowprops
visible: function (newVal) {
this.isShow = newVal; //newValvisible
// newVal && this.showConfirm(); //newValshowConfirm
},
modelType: function (newVal) {
this.type = newVal;
},
modelData: function (newVal) {
// console.log(newVal)
this.mdata = newVal;
console.log(this.type);
if (newVal.id && this.type == "edit") {
this.id = newVal.id;
// console.log('watch')
this.$nextTick(() => {
//this.$nextTick
this.form.setFieldsValue({
//setFieldsValue form
name: newVal.name,
ip: newVal.ip,
rtsp: newVal.rtsp,
rtcServer: newVal.rtcServer,
rtcServerPort: newVal.rtcServerPort,
});
});
} else if (newVal.id && this.type == "config") {
this.id = newVal.id;
this.mdata = newVal;
console.log(newVal);
}
},
},
data() {
return {
isShow: false,
player: null,
type: "",
title: "",
closable: false, //modelX
formItemAcrossLayout,
formItemVerticalLayout,
confirmLoading: false,
form: this.$form.createForm(this, { name: "dynamic_rule" }),
id: "",
mdata: [],
// //
// zoomSubUrl: require("@/assets/sub-icon.png"),
// zoomAddUrl: require("@/assets/add-icon.png"),
// focusSubUrl: require("@/assets/sub-icon.png"),
// focusAddUrl: require("@/assets/add-icon.png"),
// irisSubUrl: require("@/assets/sub-icon.png"),
// irisAddUrl: require("@/assets/add-icon.png"),
// leftUpUrl: require("@/assets/left-up-icon.png"),
// upUrl: require("@/assets/up-icon.png"),
// rightUpUrl: require("@/assets/right-up-icon.png"),
// leftUrl: require("@/assets/left-icon.png"),
// rightUrl: require("@/assets/right-icon.png"),
// leftDownUrl: require("@/assets/left-down-icon.png"),
// downUrl: require("@/assets/down-icon.png"),
// rightDownUrl: require("@/assets/right-down-icon.png"),
columns,
configData: [],
};
},
mounted() {
if (this.$route.query.modelType == "test") {
this.isShow = true;
this.id = this.$route.query.modelData.id;
this.type = this.$route.query.modelType;
this.mdata = this.$route.query.modelData;
this.$nextTick(() => {
this.autoPlay(this.id);
});
} else if (this.$route.query.modelType == "config") {
this.isShow = true;
this.id = this.$route.query.modelData.id;
this.getConfigIoList();
this.type = this.$route.query.modelType;
this.mdata = this.$route.query.modelData;
this.$nextTick(() => {
this.autoPlay(this.id);
});
}
},
computed: {
//
buttonList() {
return this.buttons.map((button) => {
return {
id: button1.id,
text: button1.text,
};
});
},
},
destroy() {
if (this.player != null) {
this.player.destroy();
}
},
methods: {
addButton() {
//
const newButton = {
id: Date.now(),
text: "New Button",
};
this.buttons1.push(newButton);
},
deleteButton(button) {
//
this.buttons = this.buttons.filter((b) => b !== button);
},
handleOk() {
this.confirmLoading = true;
setTimeout(() => {
this.form.validateFields((err, values) => {
console.log(values);
if (!err) {
console.log(this.title);
if (this.type == "add") {
this.$api.httpApi
.addCamera({
data: values,
})
.then((res) => {
if (res.code == 200) {
this.$emit("sure", false);
this.$message.success("新增球机成功");
}
})
.catch((err) => {});
} else if (this.type == "edit") {
values.id = this.id;
this.$api.httpApi
.editCamera({
data: values,
})
.then((res) => {
if (res.code == 200) {
this.$emit("sure", false);
this.$message.success("编辑球机成功");
}
})
.catch((err) => {});
}
}
});
this.confirmLoading = false;
}, 500);
},
handleCancel() {
console.log("Clicked cancel button");
this.$emit("close", false, {});
if (this.type == "test") {
this.$router.go(-1);
} else if (this.type == "config") {
console.log(this.$router.history);
this.$router.go(-1);
if (this.player != null) {
this.player.destroy();
}
}
},
autoPlay(id) {
let video = document.getElementById("config-camera" + id);
if (video) {
let server ;
if(this.mdata.rtcServerPort != null){
server= this.mdata.rtcServer+":"+this.mdata.rtcServerPort ;
}else{
server= this.mdata.rtcServer
}
let player = new WebRtcPlayer(server, video, "camera" + id);
console.log("okkkkkk");
//player.load('camera'+id);
this.player = player;
}
},
getConfigIoList() {
this.$axios
.post("/camera/" + this.id + "/io/list", {
data: {},
})
.then((res) => {
console.log(res);
if (res.code == 200) {
this.configData = res.data;
}
})
.catch((err) => {});
},
coverage(type, data) {
this.$api.httpApi
.writeInCameraIoptz({
data: {
cameraId: this.id,
cameraIOId: data.id,
name: data.name,
code: data.code,
type: type,
},
})
.then((res) => {
this.getConfigIoList();
})
.catch((err) => {});
},
toPtz(data) {
this.$api.httpApi
.cameraIoToPtz({
data: {
cameraId: this.id,
cameraIOId: data.id,
name: data.name,
},
})
.then((res) => {
console.log(res);
})
.catch((err) => {});
},
},
};
</script>
<style lang="scss" scoped>
.add-edit-model {
.across-layout {
display: flex;
}
.ant-divider-horizontal {
margin: 6px 0;
}
}
.test-model {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
#video-test {
width: 100%;
height: 100%;
}
.video-close {
position: absolute;
right: 20px;
top: 20px;
color: #ffffff;
font-size: 24px;
width: 32px;
height: 32px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}
.config-model-header {
height: "90px";
}
.operation-list {
position: absolute;
right: 200px;
bottom: 20px;
/*width: 150px;*/
/*border: solid 1px blue;*/
z-index: 10;
.operation-item {
img {
width: 42px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
span {
padding: 5px 10px;
background: rgba(0, 0, 0, 0.5);
font-size: 18px;
color: #ffffff;
}
}
}
.direction-list {
position: absolute;
right: 30px;
bottom: 20px;
width: 150px;
z-index: 10;
/*border: solid 1px blue;*/
.direction-item {
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 42px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
}
}
img {
cursor: pointer;
}
}
.config-model {
display: flex;
align-items: center;
justify-content: center;
.operation-list {
position: absolute;
right: 1000px;
bottom: 20px;
/*width: 150px;*/
/*border: solid 1px blue;*/
z-index: 10;
.operation-item {
img {
width: 32px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
span {
padding: 3px 6px;
background: rgba(0, 0, 0, 0.5);
font-size: 16px;
color: #ffffff;
}
}
}
.direction-list {
position: absolute;
right: 830px;
bottom: 20px;
width: 150px;
z-index: 10;
/*border: solid 1px blue;*/
.direction-item {
display: flex;
align-items: center;
justify-content: space-between;
img {
width: 32px;
-webkit-user-select: none;
-ms-user-select: none;
-webkit-user-drag: none;
user-select: none;
}
}
}
img {
cursor: pointer;
}
.config-table {
width: 800px;
height: 400px;
overflow: hidden;
h2 {
padding: 15px;
font-size: 20px;
background: #fafafa;
margin: 0;
}
}
}
.vxgplayer {
border: none;
margin: 0;
display: block;
}
.ant-btn {
white-space: inherit;
text-align: left;
}
</style>

@ -1,5 +1,6 @@
<template>
<a-layout class="mainIndex">
<div>
<a-layout class="mainIndex">
<AsideMenu/>
<div :class="['mainIndex-container', collapsed ? 'collapsedClose' :'']">
<PageHeader/>
@ -7,6 +8,8 @@
<PageContent/>
</div>
</a-layout>
</div>
</template>
<script>

@ -1,7 +1,7 @@
<template>
<div class="realTime bg-white">
<a-tabs default-active-key="1" slot="headerContent" v-model="tabKey" @change="tabsChange" padding:10px style="width: 80vw">
<a-tab-pane :key="item.streetId.toString()" :tab="item.streetName" v-for="item in realTimeListData"></a-tab-pane>
<a-tab-pane :key="item.streetId.toString()" :tab="item.streetId.toString()" v-for="item in realTimeListData"></a-tab-pane>
</a-tabs>
<!-- {{cameras.length}} {{ selectTab.videoStyleRow }} * {{ selectTab.videoStyleColumn }}-->
<a-row :gutter="20">
@ -166,7 +166,14 @@ export default {
let video = document.getElementById('camera'+b.id);
if(video){
console.log("play:"+b.id)
let server = b.rtcServer+":"+b.rtcServerPort;
let server ;
if(b.rtcServerPort != null){
server= b.rtcServer+":"+b.rtcServerPort;
}else{
server= b.rtcServer
}
let player = new WebRtcPlayer(server,video,'camera'+b.id);
this.players.push(player)
}

@ -114,7 +114,13 @@ export default {
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
let server ;
if(cameras[i-1].rtcServerPort != null){
server= cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
}else{
server= cameras[i-1].rtcServer
}
let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
this.players.push(player);

@ -114,7 +114,12 @@ export default {
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
let server ;
if(cameras[i-1].rtcServerPort != null){
server= cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
}else{
server= cameras[i-1].rtcServer
}
let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
this.players.push(player);

@ -114,7 +114,12 @@ export default {
}
let idName = rowIndex + "-" + columnIndex;
console.log("idName:"+idName);
let server = cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
let server ;
if(cameras[i-1].rtcServerPort != null){
server= cameras[i-1].rtcServer+":"+ cameras[i-1].rtcServerPort
}else{
server= cameras[i-1].rtcServer
}
let video = document.getElementById(idName);
let player = new WebRtcPlayer(server,video,"camera"+cameras[i-1].id);
this.players.push(player);

@ -23,6 +23,7 @@ module.exports = {
},
productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
devServer: {
disableHostCheck: true,
proxy: {
'/api/node': {
target: 'http://127.0.0.1:8117',

Loading…
Cancel
Save