Skip to content

D
donkey
Commit b9321d34 authored by caicaicai's avatar caicaicai
Browse files
Options

视频页面完善

parent 2d6affb6
Hide whitespace changes
Inline Side-by-side
Showing with 543 additions and 59 deletions
src/axios/api.js
View file @ b9321d34
//-----------------登录--------------------
export const login = 'auth/login'; //登录
export const code = 'auth/code';
\ No newline at end of file
export const code = 'auth/code';
export const mainCamera = 'camera/mainCamera'; //视频监控分区表
export const mainCameraDetail = 'camera/list'; //视频监控分区摄像头详情表
\ No newline at end of file
src/axios/axiosConfig.js
View file @ b9321d34
......@@ -17,7 +17,7 @@ axios.interceptors.request.use(
let ticket = JSON.parse(localStorage.getItem(appConfig.USER_KEY)).ticket;
config.headers.ticket = ticket == null ? '' : ticket;
}
config.headers.token = token == null ? '' : token;
config.headers.Authorization = token == null ? '' : token;
return config;
},
......
src/store/index.js
View file @ b9321d34
......@@ -25,10 +25,13 @@ const mineMonitoring = {
productionAutomation:{
name:"生产自动化",
context:[{name:"发货车辆",num:"36辆"},{name:"发货量",num:"36辆"}],
}
},
user:"",
},
mutations:{
changeUser(userName){
state.user = userName;
}
},
getters:{
......@@ -65,12 +68,10 @@ export default new Vuex.Store({
state: {
projectName:"鑫海数字矿山后台管理系统",
platformName:"鑫海数字矿山后台管理平台",
user:"",
},
mutations: {
changeUser(userName){
state.user = userName;
}
},
actions: {
},
......
src/views/homepage.vue
View file @ b9321d34
......@@ -5,7 +5,7 @@
<span>{{ $store.state.platformName }}</span>
<div class="userInformationBar">
<div style="margin-right:10px;">
<span>{{$store.state.user}}</span>
<span>{{userName}}</span>
<span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
</div>
<el-button type="primary" circle @click="handleFullScreen()" size="small" style="margin-right:10px;"><span :class="quanping"></span></el-button>
......
src/views/login.vue
View file @ b9321d34
......@@ -26,6 +26,7 @@ import axios from "axios"
import {login,code} from "@/axios/api.js"
import {encrypt} from "@/utils/rsaEncrypt.js"
import Cookies from 'js-cookie'
import { config as appConfig } from '../config.js'
export default {
......@@ -45,7 +46,7 @@ export default {
this.getCookie()
},
methods:{
getCode() {
getCode() {
httpGet(code).then(res=> {
this.loginForm.uuid = res.uuid;
});
......@@ -62,6 +63,7 @@ export default {
}
},
LoginInitiation(){
let self = this
if(this.loginForm.userName == "" || this.loginForm.password == ""){
alert("请输入正确的用户名或密码!")
}else{
......@@ -76,9 +78,17 @@ export default {
}
if(valid){
httpPostForJson(login, user).then( res =>{
//console.log(res);
console.log(res);
if(res.user.user.enabled){
//this.$store.commit('changeUser',res.user.user.nickName);
//self.$store.a.commit('changeUser',res.user.user.nickName);
localStorage.setItem(appConfig.TOKEN_KEY,res.token);
if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires })
} else {
Cookies.remove('username')
Cookies.remove('password')
}
this.$router.push({path: 'homepage/mineMonitoring'});
}else{
// console.log(res);
......@@ -89,13 +99,7 @@ export default {
}
})
this.loading = true
if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires })
} else {
Cookies.remove('username')
Cookies.remove('password')
}
} else {
console.log('error submit!!')
return false
......
src/views/videoSurveillance/videoSetting.vue
View file @ b9321d34
<template>
<div class="iframeBody">
<!-- 分区设置 -->
<div class="leftMenuBar">
<div style="color:#071E4C;font-weight:600;font-size:20px;margin-bottom:20px;">监控设置</div>
<div style="color:#071E4C;font-weight:600;font-size:17px;">
<div v-for="(item,index) in videoAreaArray" :key="index" style="margin-bottom:10px;cursor: pointer;" :class="index == videoAreaIndex ? 'leftMenuSelected' : '' " @click="videoMenuIndex(index)">
<span class="el-icon-camera-solid"> {{item}}</span>
</div>
<div style="font-weight:600;font-size:20px;margin-bottom:20px;display:flex;justify-content: space-between;">
<div style="color:#071E4C;">监控设置</div>
<el-button type="primary" size="small" @click="zoneEdit('add')" >增加分区</el-button>
</div>
<template>
<el-table :data="main_camera" height="750" border style="width: 100%">
<el-table-column prop="name" label="分区名称" align="center"></el-table-column>
<el-table-column prop="cnt" label="分区数量" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button type="text" @click="zonechecked(scope.row)">查看</el-button>
<el-button @click="zoneEdit('change',scope.row)" type="text">编辑</el-button>
<el-button type="text" @click="zoneDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-dialog :title="zoneTitle" :visible.sync="zoneVisible" width="30%">
<el-form ref="form" :model="zoneData" label-width="80px">
<el-form-item label="分区名称">
<el-input v-model="zoneData.name"></el-input>
</el-form-item>
<el-form-item label="分区数量">
<el-input v-model="zoneData.cnt"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="zoneSave()">确 定</el-button>
<el-button @click="zoneCancel()">取 消</el-button>
</span>
</el-dialog>
<el-dialog title="你确定删除该分区吗？" :visible.sync="zoneDeleteVisible" width="30%">
<el-button type="danger" @click="agreeDeleteZone()">删除</el-button>
<el-button @click="cancelDeleteZone()">取消</el-button>
</el-dialog>
<!-- 详情设置 -->
<div class="rightVideoBox">
<span style="margin-right:50px;font-size:20px;font-family: '微软雅黑';font-weight:600;">{{cameraDetailName}}</span>
<el-button type="primary" @click="cameraDetaileEdit('add')">增加摄像头</el-button>
<template>
<el-table :data="cameraDetail" height="750" border style="width: 100%;margin-top:12px">
<el-table-column prop="camera_id" label="摄像头ID" align="center"></el-table-column>
<el-table-column prop="camera_name" label="摄像头名称" align="center"></el-table-column>
<el-table-column prop="camera_ip" label="摄像头IP" align="center"></el-table-column>
<el-table-column prop="camera_port" label="摄像头端口" align="center"></el-table-column>
<el-table-column prop="video_url" label="视频URL" align="center"></el-table-column>
<el-table-column prop="camera_way" label="通道" align="center"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button @click="cameraDetaileEdit('change',scope.row)" type="text">编辑</el-button>
<el-button type="text" @click="cameraDetaileDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="30%">
<el-form ref="form" :model="cameraDetailData" label-width="80px">
<el-form-item label="摄像头ID">
<el-input v-model="cameraDetailData.camera_id" :disabled="disabledInp"></el-input>
</el-form-item>
<el-form-item label="摄像头名称">
<el-input v-model="cameraDetailData.camera_name"></el-input>
</el-form-item>
<el-form-item label="摄像头IP">
<el-input v-model="cameraDetailData.camera_ip"></el-input>
</el-form-item>
<el-form-item label="摄像头端口">
<el-input v-model="cameraDetailData.camera_port"></el-input>
</el-form-item>
<el-form-item label="视频URL">
<el-input v-model="cameraDetailData.video_url"></el-input>
</el-form-item>
<el-form-item label="通道">
<el-input v-model="cameraDetailData.camera_way"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="cameraDetaileSave()">确 定</el-button>
<el-button @click="cameraDetaileCancel()">取 消</el-button>
</span>
</el-dialog>
<el-dialog title="你确定删除该摄像头吗？" :visible.sync="cameraDetaileDeleteVisible" width="30%">
<el-button type="danger" @click="agreeDeleteCameraDetaile()">删除</el-button>
<el-button @click="cancelDeleteCameraDetaile()">取消</el-button>
</el-dialog>
</div>
</template>
<script>
import { httpGet, httpPost,httpPostForJson } from "@/common/httpBean.js"
import axios from "axios"
import {mainCamera,mainCameraDetail} from "@/axios/api.js"
export default {
created(){
this.getCode()
},
data(){
return{
videoAreaArray:["采区监控","厂区监控","办公室监控","办公室监控1","办公室监控2"],
videoAreaIndex:0,
//分区部分
main_camera:[{
id:1,
name:"采区监控",
cnt:4,
main_cameraDetail:[{
id:1,
camera_id:1,
camera_name:"采区1",
camera_ip:"192.102",
camera_port:1001,
video_url:"1221212",
camera_way:"通道1"
},{
id:2,
camera_id:1,
camera_name:"采区2",
camera_ip:"192.102",
camera_port:1002,
video_url:"1221212",
camera_way:"通道2"
},{
id:3,
camera_id:1,
camera_name:"采区3",
camera_ip:"192.102",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:1,
camera_name:"采区4",
camera_ip:"192.102",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}]
},{
id:2,
name:"厂区监控",
cnt:4,
main_cameraDetail:[{
id:1,
camera_id:2,
camera_name:"厂区监控1",
camera_ip:"192.230",
camera_port:1001,
video_url:"1221212",
camera_way:"通道1"
},{
id:2,
camera_id:2,
camera_name:"厂区监控2",
camera_ip:"192.230",
camera_port:1002,
video_url:"1221212",
camera_way:"通道2"
},{
id:3,
camera_id:2,
camera_name:"厂区监控3",
camera_ip:"192.230",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:2,
camera_name:"厂区监控4",
camera_ip:"192.230",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}]
},{
id:3,
name:"办公室监控",
cnt:4,
main_cameraDetail:[{
id:1,
camera_id:3,
camera_name:"办公室监控_1",
camera_ip:"192.523",
camera_port:1001,
video_url:"1221212",
camera_way:"通道1"
},{
id:2,
camera_id:3,
camera_name:"办公室监控_2",
camera_ip:"192.523",
camera_port:1002,
video_url:"1221212",
camera_way:"通道2"
},{
id:3,
camera_id:3,
camera_name:"办公室监控_3",
camera_ip:"192.523",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:3,
camera_name:"办公室监控_4",
camera_ip:"192.523",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}]
},{
id:4,
name:"办公室监控1",
cnt:4,
main_cameraDetail:[{
id:1,
camera_id:4,
camera_name:"办公室监控1_1",
camera_ip:"192.155",
camera_port:1001,
video_url:"1221212",
camera_way:"通道1"
},{
id:2,
camera_id:4,
camera_name:"办公室监控1_2",
camera_ip:"192.155",
camera_port:1002,
video_url:"1221212",
camera_way:"通道2"
},{
id:3,
camera_id:4,
camera_name:"办公室监控1_3",
camera_ip:"192.155",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:4,
camera_name:"办公室监控1_4",
camera_ip:"192.155",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}]
},{
id:5,
name:"办公室监控2",
cnt:4,
main_cameraDetail:[{
id:1,
camera_id:5,
camera_name:"办公室监控2_1",
camera_ip:"192.125",
camera_port:1001,
video_url:"1221212",
camera_way:"通道1"
},{
id:2,
camera_id:5,
camera_name:"办公室监控2_2",
camera_ip:"192.125",
camera_port:1002,
video_url:"1221212",
camera_way:"通道2"
},{
id:3,
camera_id:5,
camera_name:"办公室监控2_3",
camera_ip:"192.125",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:5,
camera_name:"办公室监控2_4",
camera_ip:"192.125",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}]
}],
zoneTitle:"",
zoneVisible:false,
zoneType:"",
zoneData:{ name:"",cnt:"",},
zoneDeleteVisible:false,
//详情部分
cameraDetail:[{
id:1,
camera_id:1,
camera_name:"采区1",
camera_ip:"192.102",
camera_port:1001,
video_url:"1221212",
camera_way:"通道1"
},{
id:2,
camera_id:1,
camera_name:"采区2",
camera_ip:"192.102",
camera_port:1002,
video_url:"1221212",
camera_way:"通道2"
},{
id:3,
camera_id:1,
camera_name:"采区3",
camera_ip:"192.102",
camera_port:1003,
video_url:"1221212",
camera_way:"通道3"
},{
id:4,
camera_id:1,
camera_name:"采区4",
camera_ip:"192.102",
camera_port:1003,
video_url:"1221212",
camera_way:"通道4"
}],
cameraDetailName:"采区监控分区详情表",
cameraDetailTitle:"",
cameraDetailVisible:false,
cameraDetailType:"",
cameraDetailData:{id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""},
cameraDetaileDeleteVisible:false,
disabledInp:false,
}
},
methods:{
videoMenuIndex(index){
this.videoAreaIndex = index;
}
getCode() {
httpGet(mainCameraDetail).then(res => {
console.log(res);
});
},
//分区部分
zonechecked(row){
let that = this;
console.log(row.id);
this.main_camera.forEach(function(item){
if(item.id == row.id){
that.cameraDetailName = item.name + "分区详情表";
that.cameraDetail = item.main_cameraDetail
}
})
},
zoneEdit(type,row){
this.zoneData = {id:'',name: '',cnt:''};
this.zoneVisible = true;
this.zoneType = type;
if(this.zoneType === "add"){
this.zoneTitle = "增加分区";
}else if(this.zoneType === "change"){
this.zoneTitle = "修改分区";
this.zoneData = {...row};
}
},
zoneSave(){
if(this.zoneType === "add"){
if(this.zoneData.name === ""){
alert("分区名不得为空！");
return;
}
this.main_camera.unshift(this.zoneData);
this.zoneVisible = false;
this.zoneData = {id:'',name: '',cnt:''};
}else if(this.zoneType === "change"){
let that = this;
let newData = [];
this.main_camera.forEach(function(item){
if(item.id === that.zoneData.id){
newData.push(that.zoneData);
}else{
newData.push(item);
}
})
this.main_camera = newData;
this.zoneVisible = false;
this.zoneData = {id:'',name: '',cnt:''};
}
},
zoneCancel(){
this.zoneVisible = false;
this.zoneData = {id:'',name: '',cnt:''};
},
zoneDelete(row){
//console.log(row);
this.zoneDeleteVisible = true;
this.zoneData = {...row};
},
agreeDeleteZone(){
let that = this;
let newData = [];
this.main_camera.forEach(function(item){
if(item.id === that.zoneData.id){
if(that.zoneData.id == that.cameraDetail[0].camera_id){
that.cameraDetail = [];
}
return;
}else{
newData.push(item);
}
})
this.main_camera = newData;
this.zoneDeleteVisible = false;
this.zoneData = {id:'',name: '',cnt:''};
},
cancelDeleteZone(){
this.zoneDeleteVisible = false;
this.zoneData = {id:'',name: '',cnt:''};
},
//详情部分
cameraDetaileEdit(type,row){
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
this.cameraDetailVisible = true;
this.cameraDetailType = type;
if(this.cameraDetailType === "add"){
this.cameraDetailTitle = "增加摄像头";
this.disabledInp = false;
}else if(this.cameraDetailType === "change"){
this.cameraDetailTitle = "修改摄像头";
this.cameraDetailData = {...row};
this.disabledInp = true;
}
},
cameraDetaileSave(){
if(this.cameraDetailType === "add"){
if(this.cameraDetailData.camera_id === ""){
alert("分区名不得为空！");
return;
}
this.cameraDetail.unshift(this.cameraDetailData);
this.cameraDetailVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
}else if(this.cameraDetailType === "change"){
let that = this;
let newData = [];
this.cameraDetail.forEach(function(item){
if(item.id === that.cameraDetailData.id){
newData.push(that.cameraDetailData);
}else{
newData.push(item);
}
})
this.cameraDetail = newData;
this.cameraDetailVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
}
},
cameraDetaileCancel(){
this.cameraDetailVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
},
cameraDetaileDelete(row){
//console.log(row);
this.cameraDetaileDeleteVisible = true;
this.cameraDetailData = {...row};
},
agreeDeleteCameraDetaile(){
let that = this;
let newData = [];
that.cameraDetail.forEach(function(item){
if(item.id === that.cameraDetailData.id){
return;
}else{
newData.push(item);
}
})
this.cameraDetail = newData;
this.cameraDetaileDeleteVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
},
cancelDeleteCameraDetaile(){
this.cameraDetaileDeleteVisible = false;
this.cameraDetailData = {id:"",camera_id:"",camera_name:"",camera_ip:"",camera_port:"",video_url:"",camera_way:""};
},
},
}
......@@ -37,6 +497,7 @@ export default {
<style scoped>
*{
margin: 0;
padding: 0;
}
......@@ -46,19 +507,19 @@ export default {
width: 100%;
}
.leftMenuBar{
width: 10%;
width: 25%;
height: 100%;
background-color: white;
padding: 20px;
box-sizing: border-box;
}
.rightVideoBox{
width: 90%;
width: 75%;
height: 100%;
background-color: sandybrown;
display: flex;
flex-wrap: wrap;
justify-content: center;
border-left: 1px solid rgb(245,246,251);
background-color: white;
padding: 20px;
box-sizing: border-box;
}
.leftMenuSelected{
color: rgb(0,82,255);
......
src/views/videoSurveillance/videoShow.vue
View file @ b9321d34
......@@ -4,8 +4,8 @@
<div class="leftMenuBar">
<div style="color:#071E4C;font-weight:600;font-size:20px;margin-bottom:20px;">视频监控区域</div>
<div style="color:#071E4C;font-weight:600;font-size:17px;">
<div v-for="(item,index) in videoAreaArray" :key="index" style="margin-bottom:10px;cursor: pointer;" :class="index == videoAreaIndex ? 'leftMenuSelected' : '' " @click="videoMenuIndex(index)">
<span class="el-icon-camera-solid"> {{item}}</span>
<div v-for="(item,index) in main_camera" :key="index" style="margin-bottom:10px;cursor: pointer;" :class="index == videoAreaIndex ? 'leftMenuSelected' : '' " @click="videoMenuIndex(index)">
<span class="el-icon-camera-solid"> {{item.name}}</span>
</div>
</div>
</div>
......@@ -23,7 +23,22 @@
export default {
data(){
return{
videoAreaArray:["采区监控","厂区监控","办公室监控","办公室监控1","办公室监控2"],
main_camera:[{
name:"采区监控",
cnt:4,
},{
name:"厂区监控",
cnt:4
},{
name:"办公室监控",
cnt:4
},{
name:"办公室监控1",
cnt:4
},{
name:"办公室监控2",
cnt:4
}],
videoAreaIndex:0,
rightVideoBoxArray:[4,4,4,4],
}
......
vue.config.js
View file @ b9321d34
......@@ -94,25 +94,26 @@ module.exports = {
// 所有 webpack-dev-server 的选项都支持
devServer: {
proxy: {
'/api': {
target: process.env.VUE_APP_URL,
changeOrigin: true,
pathRewrite: {
'^/api' : ''
}
},
'/mock': {
// target: "http://192.168.7.124:20000/mock/5cf77a56210725034419be41",
// target: 'http://45.125.46.128:20000/mock/5cf77a56210725034419be41',
target: 'localhost:30003/hlkj/',
// changeOrigin: true,
ws: true,
pathRewrite: {
"^/mock": ""
}
},
}
// proxy: {
// '/api': {
// // target: process.env.VUE_APP_URL,
// target: 'http://192.168.0.108:8013/',
// changeOrigin: true,
// pathRewrite: {
// '^/api' : ''
// }
// },
// '/mock': {
// // target: "http://192.168.7.124:20000/mock/5cf77a56210725034419be41",
// // target: 'http://45.125.46.128:20000/mock/5cf77a56210725034419be41',
// target: 'localhost:30003/hlkj/',
// // changeOrigin: true,
// ws: true,
// pathRewrite: {
// "^/mock": ""
// }
// },
// }
},
// 是否为 Babel 或 TypeScript 使用 thread-loader
......
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