Skip to content

K
kd_control
Commit 622ee9f7 authored by zhanglw's avatar zhanglw
Browse files
Options

车辆监控视频

parent 4c3b9713
Hide whitespace changes
Inline Side-by-side
Showing with 753 additions and 398 deletions
src/assets/js/common.js
View file @ 622ee9f7
......@@ -2780,6 +2780,43 @@ var HttpReq = function(){
params:param,
})
},
//车队视频监控-获取车队树
jkCarTree: function(param){
return request({
url: '/api/carMonitor/carTree',
method: 'get',
params:param,
})
},
//车队视频监控-摄像头
jkcarMonitorFind: function(param){
return request({
url: '/api/carMonitor',
method: 'get',
params:param,
})
},
jkcarMonitorAdd: function(data){
return request({
url: '/api/carMonitor',
method: 'POST',
data:data,
})
},
jkcarMonitorEdit: function(data){
return request({
url: '/api/carMonitor',
method: 'PUT',
data:data,
})
},
jkcarMonitorDelete: function(data){
return request({
url: '/api/carMonitor',
method: 'Delete',
data:data,
})
},
},
......
src/components/ezuikit/carsEZUIKitJs.vue
View file @ 622ee9f7
......@@ -5,27 +5,25 @@
<el-aside width="20vw" style="height: 89vh;margin-top: 5.5vh;z-index: 3;">
<div class="videoCarsInput">
<div style="color: #A6F6F9;">选择车牌号：</div>
<el-select v-model="searchCarText" placeholder="选择车牌号" @change="searchCarFn()">
<el-option v-for="item in searchCarData" :key="item.number" :label="item.number" :value="item.number"></el-option>
</el-select>
<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
</div>
<el-tree
:data="videoData"
:props="defaultProps"
@node-click="handleNodeClick"
accordion
>
<el-tree :data="carListTree" :props="defaultProps" accordion highlight-current
:filter-node-method="filterNode" @current-change="handleNodeClick" ref="tree">
<div slot-scope="{ node }" class="roadClass">{{ node.label }}</div>
</el-tree>
</el-aside>
<DPcomputer17 class="DPcomputer17Class"></DPcomputer17>
<div v-if="noPtz" class="noPtzVideo1">
<div v-show="noPtz" class="noPtzVideo1">
<video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;">
您的浏览器不支持：HTML5 video.
</video>
noPtzCameraList
<el-select v-model="cameraSrc" class="noPtzCameraList" @change="videoPlay()">
<el-option v-for="item in cameraList" :key="item.id" :label="item.monitorName" :value="item.monitorUrl" style="font-size:16px;font-weight:400"></el-option>
</el-select>
<el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭</el-button>
<iframe :src="iframeSrc" class="iframeSingle"></iframe>
</div>
<div class="aiAnalysisRightViews">
......@@ -118,24 +116,34 @@ import * as echarts from 'echarts';
import axios from 'axios'
import moment from 'moment';
import DPcomputer17 from '../../views/MLargeScreen/components/smallComponents/DPcomputer17.vue'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'
export default {
components:{
DPcomputer17,
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
data() {
return {
videoPlayer: null,
filterText: '',
carListTree: [],
defaultProps: {
children: 'children',
label: 'label'
},
cameraList:[],
cameraSrc:'',
videoAlarmAllTimer:null,
imgSrcStart:process.env.VUE_APP_LOCAL_API2,
iframeSrc:'',
defaultIframeSrc:'http://oa.gemho.cn:8088/808gps/open/player/video.html?lang=zh&channel=9&account=admin&password=admin&vehiIdno=',
aiAnalysisTableData:[],
videoData: [],
defaultProps: {
children: "children",
label: "label",
},
noPtz:false,
noPtz: false,
aiTabPosition:'今天',
echarts1Data:[{ value: 0, name: '接打电话' }, { value: 0, name: '分神驾驶' }, { value: 0, name: '前向碰撞' }, { value: 0, name: '疲劳驾驶' }, { value: 0, name: '接近报警' }],
echarts2Data:{
......@@ -150,16 +158,13 @@ export default {
total:0,
handle:0,
},
//所有车的信息
searchCarText:'',
//视频数据
videoSrc:'',
videoSrcShow:false,
//图片数据
elimageSrc:'',
elimageSrcShow:false,
//车辆数据
searchCarData:[],
};
},
mounted() {
......@@ -168,50 +173,56 @@ export default {
this.videoAlarmAllTimer = setInterval(()=>{
this.aiTabPositionFn(this.aiTabPosition);
},10000)
this.videoPlayer = videojs('videoRealtime', {
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
}, function () {
console.log('video ready!')
})
setTimeout(()=>{
},3000);
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
getCode() {
//获取车辆信息
HttpReq.truckDispatching.carInformationQuery({size:9999}).then((res) => {
if(res.code == 200){
this.searchCarData = res.data.content;
}
})
//分区数据
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.label = 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;
})
HttpReq.truckDispatching.jkCarTree().then((res) => {
if (res.code == 200) {
this.carListTree = res.data;
}
})
})
},
videoPlay(){
this.videoPlayer.src({src:this.cameraSrc,type:'application/x-mpegURL'});
this.videoPlayer.play();
},
handleNodeClick(data) {
if (data.children) {
return
} else {
this.iframeSrc = this.defaultIframeSrc + data.carnumber;
this.noPtz = true;
HttpReq.truckDispatching.jkcarMonitorFind({carNumber: data.label}).then((res) => {
if (res.code == 200) {
if(res.data && res.data.length){
this.noPtz = true;
this.cameraList = res.data;
this.cameraSrc = this.cameraList[0].monitorUrl;
this.videoPlay();
}else{
this.noPtzCloseFn();
this.$notify({
title: '该车无视频监控！',
type: 'warning',
duration: 2500
});
}
}
})
}
},
aiTabPositionFn(text){
......@@ -538,7 +549,7 @@ export default {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
type: 'shadow'
}
},
legend: {
......@@ -678,7 +689,7 @@ export default {
var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
var hours = date.getHours(); //小时 ,返回 Date 对象的小时 (0 ~ 23)
var minutes = date.getMinutes(); //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
var seconds = date.getSeconds(); //秒 ,返回 Date 对象的秒数 (0 ~ 59)
//修改月份格式
if (month >= 1 && month <= 9) {
month = "0" + month;
......@@ -705,20 +716,7 @@ export default {
changeTime1(row){
return this.currentTime1(row.stm);
},
searchCarFn(){
HttpReq.truckDispatching.carMonitoringCarsQuery({carnumber:this.searchCarText}).then((res) => {
if(res.totalElements == 0){
this.$notify({
title: '该车无视频监控！',
type: 'warning',
duration: 2500
});
}else{
this.noPtz = true;
this.iframeSrc = this.defaultIframeSrc + res.content[0].carnumber;
}
})
},
//关闭视频
closeVideo(){
this.videoSrcShow = false;
......@@ -736,14 +734,15 @@ export default {
clearInterval(this.videoAlarmAllTimer);
this.videoAlarmAllTimer = null;
}
this.iframeSrc = '';
this.videoPlayer.dispose();
this.videoPlayer = null;
this.noPtz = false;
this.videoSrcShow = false;
this.videoSrc = '';
this.elimageSrcShow = false;
this.elimageSrc = '';
}
};
</script>
......@@ -790,7 +789,7 @@ export default {
scrollbar-width: none;
}
.videoCars .el-tree-node__content {
height: 50px;
height: 40px;
background-color: rgba(32,42,67,0.95);
width: 20vw;
}
......@@ -806,18 +805,21 @@ export default {
.videoCars .el-tree-node__content>.el-tree-node__expand-icon{
display: none;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color:rgba(200,200,200,0.25);
}
.videoCars .roadClass{
height: 45px;
height: 35px;
width: 90%;
line-height: 45px;
line-height: 35px;
text-align: center;
font-size: 19px;
font-size: 18px;
font-weight: 600;
letter-spacing: 2px;
color: white;
border-radius: 5px;
background: linear-gradient(to bottom, #30CFBE, #007EFF);
margin: 0px auto;
margin: 0 auto;
}
.videoCars .el-tree-node__children{
width: 90%;
......@@ -841,7 +843,7 @@ export default {
letter-spacing: 2px;
color: #A6F6F9;
border-radius: 5px;
background: linear-gradient(to bottom, rgba(32,42,67,0.95), rgba(32,42,67,0.95));
background: linear-gradient(to bottom, rgba(32,42,67,0), rgba(32,42,67,0));
margin: 0px auto;
}
.video111 .el-input--small .el-input__inner{
......@@ -858,11 +860,18 @@ export default {
}
.noPtzCloseStyle{
position: absolute;
top:0.5vh;
right: 0.5vh;
top:2vh;
right: 1vh;
font-size: 20px;
cursor: pointer;
}
.noPtzCameraList{
position: absolute;
top:2vh;
left: 1vh;
font-size: 18px;
cursor: pointer;
}
.noPtzVideo1{
width: 60vw;
height: 94.5vh;
......@@ -962,7 +971,7 @@ export default {
display: flex;
justify-content: space-evenly;
margin-top: 0.5vh;
}
.video111 .alarmViewsStyle1_left1{
padding-top: 0.5vh;
......
src/views/monitoringManagement/carVideoSetUp/index.vue
View file @ 622ee9f7
......@@ -7,397 +7,234 @@
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>监控车队</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="zoneEdit('add')">添加监控车队</el-button>
</div>
<div class="text item">
<el-table :data="main_camera" border style="width: 100%" @row-click="gridClick">
<el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
<el-table-column prop="name" label="车队名称" align="left"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button size="mini" round type="primary" @click="zoneEdit('change',scope.row)">编辑</el-button>
<el-button size="mini" round type="danger" @click="zoneDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
<el-tree class="filter-tree" :data="carListTree" :props="defaultProps" highlight-current accordion :filter-node-method="filterNode" @current-change="treeNodeChange" ref="tree"></el-tree>
</div>
</el-card>
<el-dialog :title="zoneTitle" :visible.sync="zoneVisible" width="30%">
<el-form ref="zoneData" :rules="rules" :model="zoneData" label-width="80px">
<el-form-item label="车队名称" style="margin-bottom:15px;" prop="name">
<el-input v-model="zoneData.name" ></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="zoneCancel()" style="padding:10px;">取 消</el-button>
<el-button type="primary" @click="zoneSave()" style="padding:10px;">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="提示" :visible.sync="zoneDeleteVisible" width="30%">
你确定删除该分区吗？
<span slot="footer" class="dialog-footer">
<el-button @click="cancelDeleteZone()" style="padding:10px;">取消</el-button>
<el-button type="danger" @click="agreeDeleteZone()" style="padding:10px;">删除</el-button>
</span>
</el-dialog>
</div>
<!-- 摄像头明细 -->
<!-- 摄像头列表 -->
<div class="rightVideoBox">
<el-card>
<div slot="header" class="clearfix">
<span>{{DetailTitle}}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="cameraDetaileEdit('add')">添加摄像头</el-button>
<span>{{ carNumber }}</span>
<el-button v-show="carNumber" style="float: right; padding: 3px 0" type="text" @click="cameraDetailAdd()">添加摄像头</el-button>
</div>
<div class="text item">
<el-table :data="cameraDetail" border style="width: 100%" height="710">
<el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
<el-table-column prop="carnumber" label="车牌号" align="left"></el-table-column>
<el-table-column prop="name" label="摄像头名称" align="center"></el-table-column>
<!-- <el-table-column prop="ip" label="ip" align="center"></el-table-column>
<el-table-column prop="port" label="端口" align="center"></el-table-column> -->
<el-table-column prop="monitorName" label="摄像头名称" align="center" width="150"></el-table-column>
<el-table-column prop="monitorUrl" label="直播视频源" align="center"></el-table-column>
<el-table-column prop="updateTime" label="最后更新时间" align="center" width="150"></el-table-column>
<el-table-column label="操作" width="150" align="center">
<template slot-scope="scope">
<el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button>
<el-button size="mini" round type="success" @click="cameraDetailEdit(scope.row)">修改</el-button>
<el-button size="mini" round type="danger" @click="cameraDetailDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="30%">
<el-form ref="cameraDetailData" :rules="rulesDetai" :model="cameraDetailData" label-width="100px">
<el-form-item label="车牌号" style="margin-bottom:15px;" prop="carnumber">
<el-input v-model="cameraDetailData.carnumber"></el-input>
</el-form-item>
<el-form-item label="摄像头名称" style="margin-bottom:15px;" prop="name">
<el-input v-model="cameraDetailData.name"></el-input>
</el-form-item>
<!-- <el-form-item label="IP" style="margin-bottom:15px;" prop="ip">
<el-input v-model="cameraDetailData.ip"></el-input>
</el-form-item>
<el-form-item label="端口" style="margin-bottom:15px;">
<el-input v-model="cameraDetailData.port"></el-input>
</el-form-item> -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cameraDetaileCancel()" style="padding:10px;">取 消</el-button>
<el-button type="primary" @click="cameraDetaileSave()" style="padding:10px;">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="提示" :visible.sync="cameraDetaileDeleteVisible" width="30%">
你确定删除该摄像头吗？
<span slot="footer" class="dialog-footer">
<el-button @click="cancelDeleteCameraDetaile()" style="padding:10px;">取消</el-button>
<el-button type="danger" @click="agreeDeleteCameraDetaile()" style="padding:10px;">删除</el-button>
</span>
</el-dialog>
</div>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" title="摄像头设置" width="600px">
<el-form :model="formData" :rules="rules" ref="formViewRef" label-width="110px">
<el-form-item label="摄像头名称：" prop="monitorName">
<el-input v-model="formData.monitorName" class="cell-input"></el-input>
</el-form-item>
<br/>
<el-form-item label="直播视频源：" prop="monitorUrl">
<el-input v-model="formData.monitorUrl" class="cell-input"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button>
<el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
export default {
created(){
this.getCode()
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
data(){
return{
//分区部分
main_camera:[],
zoneTitle:"",
zoneVisible:false,
zoneType:"",
zoneData:{ name:"",cnt:"",},
zoneDeleteVisible:false,
//详情部分
cameraDetailAll:[],
cameraDetail:[],
cameraDetailName:"",
cameraDetailTitle:"",
cameraDetailVisible:false,
cameraDetailType:"",
cameraDetailData:{},
cameraDetaileDeleteVisible:false,
disabledInp:false,
camID:"1",
DetailTitle:"",
data() {
return {
visible: false,
filterText: '',
carListTree: [],
defaultProps: {
children: 'children',
label: 'label'
},
carNumber: ' ',
cameraDetail: [],
formData:{
id:'',
monitorName:'',
monitorUrl:'',
},
rules: {
name: [ { required: true, message: '请输入分区名称', trigger: 'blur' },]
monitorName: {required: true, message: '请输入设备名称', trigger: 'blur'},
monitorUrl: {required: true, message: '请输入视频源路由', trigger: 'blur'},
},
rulesDetai:{
carnumber: [ { required: true, message: '请输入车牌号', trigger: 'blur' },],
name: [ { required: true, message: '请输入摄像头名称', trigger: 'blur' },],
}
}
},
methods:{
// 区域单击
gridClick (row, index) {
this.DetailTitle = row.name;
this.camID = row.id;
this.getCode1(row.id);
},
formatter(row, column) {
return row.brand === 1? "海康威视" : "大华";
},
getCode() {
let param = {};
HttpReq.truckDispatching.carMonitoringFleetQuery(param).then((res) => {
this.main_camera = res.content;
if(res.content.length > 0){
this.DetailTitle = res.content[0].name;
this.getCode1(res.content[0].id);
mounted() {
this.$nextTick(() => {
this.loadCarListTree();
})
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
loadCarListTree() {
HttpReq.truckDispatching.jkCarTree().then((res) => {
if (res.code == 200) {
this.carListTree = res.data;
}
})
},
getCode1(id) {
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:9999,motorcadeId:id}).then((res) => {
console.log("mainCameraDetail",res);
this.cameraDetail = res.content;
})
},
//分区部分
zonechecked(row){
this.cameraDetailName = row.name + "分区详情表";
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100,motorcadeId:id}).then((res) => {
console.log("mainCameraDetail",res);
this.cameraDetail = res.content;
})
})
},
zoneEdit(type,row){
this.zoneData = {};
this.zoneVisible = true;
this.zoneType = type;
if(this.zoneType == "add"){
this.zoneTitle = "增加分区";
}else if(this.zoneType == "change"){
this.zoneTitle = "修改分区";
this.zoneData = {...row};
treeNodeChange(dataObj, node){
if(!dataObj.children){
this.carNumber=dataObj.label;
this.cameraDetailFind()
}
},
zoneSave(){
this.$refs['zoneData'].validate((valid) => {
if (valid) {
if(this.zoneType == "add"){
console.log(this.zoneData);
let param = {};
HttpReq.truckDispatching.carMonitoringFleetAdd(this.zoneData).then((res) => {
this.$message.success('添加成功');
HttpReq.truckDispatching.carMonitoringFleetQuery(param).then((res) => {
this.main_camera = res.content;
console.log("mainCamera",this.main_camera);
})
}).catch(function(error) { });
this.zoneVisible = false;
this.zoneData = {name: ''};
}else if(this.zoneType == "change"){
console.log(this.zoneData);
let param = {};
HttpReq.truckDispatching.carMonitoringFleetUpdate(this.zoneData).then((res) => {
this.$message.success('修改成功');
HttpReq.truckDispatching.carMonitoringFleetQuery(param).then((res) => {
this.main_camera = res.content;
console.log("mainCamera",this.main_camera);
})
}).catch(function(error) { });
this.zoneVisible = false;
this.zoneData = {id:'',name: ''};
}
} else {
console.log('error submit!!');
return false;
cameraDetailAdd() {
this.visible = true;
this.formData.id='';
},
cancelForm() {
this.visible = false;
this.$refs.formViewRef.resetFields();
this.cameraDetailFind();
},
submitForm(validateName, item) {
this.$refs[validateName].validate(valid => {
if (valid) {
if(this.formData.id){
HttpReq.truckDispatching.jkcarMonitorEdit({carNumber:this.carNumber,...this.formData}).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.cancelForm();
}
})
}else{
HttpReq.truckDispatching.jkcarMonitorAdd({carNumber:this.carNumber,...this.formData}).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.cancelForm();
}
})
}
}
});
},
zoneCancel(){
this.zoneVisible = false;
this.zoneData = {id:'',name: '',cnt:''};
},
zoneDelete(row){
//console.log(row);
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
type: 'warning'
}).then( () => {
HttpReq.truckDispatching.carMonitoringFleetDel([row.id]).then((res) => {
this.$message({
message: "删除成功",
type: 'success'
});
let param = {};
HttpReq.truckDispatching.carMonitoringFleetQuery(param).then((res) => {
this.main_camera = res.content;
console.log("mainCamera",this.main_camera);
})
})
})
},
agreeDeleteZone(){
let that = this;
let arrs = [];
arrs.push(parseInt(that.zoneData.id));
console.log(arrs);
HttpReq.truckDispatching.carMonitoringFleetDel(arrs).then((res) => {
this.$message.success('删除成功');
let param = {};
HttpReq.truckDispatching.carMonitoringFleetQuery(param).then((res) => {
this.main_camera = res.content;
console.log("mainCamera",this.main_camera);
})
cameraDetailFind() {
HttpReq.truckDispatching.jkcarMonitorFind({carNumber:this.carNumber}).then((res) => {
if (res.code == 200) {
this.cameraDetail = res.data;
}
})
this.zoneDeleteVisible = false;
},
cancelDeleteZone(){
this.zoneDeleteVisible = false;
this.zoneData = {id:'',name: '',cnt:''};
},
//详情部分
cameraDetaileEdit(type,row){
this.cameraDetailData = {};
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(){
this.$refs['cameraDetailData'].validate((valid) => {
if (valid) {
if(this.cameraDetailType == "add"){
this.cameraDetailData.motorcadeId = this.camID;
console.log(this.cameraDetailData);
HttpReq.truckDispatching.carMonitoringCarsAdd(this.cameraDetailData).then((res) => {
this.$message.success('添加成功');
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100,motorcadeId:this.camID}).then((res) => {
console.log("mainCameraDetail",res);
this.cameraDetail = res.content;
})
}).catch(function(error) { });
this.cameraDetailVisible = false;
this.cameraDetailData = {};
}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:"",motorcadeId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
}
} else {
console.log('error submit!!');
return false;
cameraDetailEdit(item) {
this.visible = true;
this.formData = item;
},
cameraDetailDelete(item) {
this.$confirm( '确认删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
HttpReq.truckDispatching.jkcarMonitorDelete({id:item.id}).then((res) => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.cameraDetailFind();
}
});
},
cameraDetaileCancel(){
this.cameraDetailVisible = false;
this.cameraDetailData = {};
},
cameraDetaileDelete(row){
console.log(row);
this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
type: 'warning'
}).then( () => {
HttpReq.truckDispatching.carMonitoringCarsDel([row.id]).then((res) => {
this.$message({
message: "删除成功",
type: 'success'
});
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100,motorcadeId:this.camID}).then((res) => {
console.log("mainCameraDetail",res);
this.cameraDetail = res.content;
})
})
})
},
agreeDeleteCameraDetaile(){
let that = this;
let arrs1 = [];
arrs1.push(parseInt(that.cameraDetailData.id));
console.log(arrs1);
HttpReq.truckDispatching.carMonitoringCarsDel(arrs1).then((res) => {
this.$message.success('删除成功');
HttpReq.truckDispatching.carMonitoringCarsQuery({page:0,size:100,motorcadeId:this.camID}).then((res) => {
console.log("mainCameraDetail",res);
this.cameraDetail = res.content;
})
})
this.cameraDetaileDeleteVisible = false;
this.cameraDetailData = {};
},
cancelDeleteCameraDetaile(){
this.cameraDetaileDeleteVisible = false;
this.cameraDetailData = {};
}).catch((e) => {})
},
},
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
}
.iframeBody{
.iframeBody {
height: 100%;
display: flex;
width: 100%;
}
.leftMenuBar{
.leftMenuBar {
width: 25%;
height: 100%;
background-color: white;
padding: 20px;
box-sizing: border-box;
}
.rightVideoBox{
.rightVideoBox {
width: 75%;
height: 100%;
border-left: 1px solid rgb(245,246,251);
border-left: 1px solid rgb(245, 246, 251);
background-color: white;
padding: 20px;
box-sizing: border-box;
}
.leftMenuSelected{
color: rgb(0,82,255);
.leftMenuSelected {
color: rgb(0, 82, 255);
}
.sonVideoBox{
.sonVideoBox {
width: 49.8%;
height: 49.8%;
border: 1px solid red;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 380px;
height: 100%;
}
</style>
\ No newline at end of file
</style>
src/views/slopeMonitoring/slopeDevice/index.vue
View file @ 622ee9f7
......@@ -260,6 +260,19 @@
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="网络类型：" class="form-cell">
<div class="cell-box">
<el-select v-model="formData.xxxxx" placeholder="无" class="cell-input">
<el-option v-for="item in sdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="传感器初始值：" class="form-cell">
......@@ -269,6 +282,177 @@
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="初始值x方向：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="初始值y方向：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="初始值z方向：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="报警状态：" class="form-cell">
<div class="cell-box">
<el-select v-model="formData.xxxxx" placeholder="无" class="cell-input">
<el-option v-for="item in sdOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="浸润线埋深(米)：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="检验周期：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="库水位设备类型：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="X位移：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="Y位移：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="Z位移：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="孔深(浸润线)：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="设备深度(浸润线)：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="距剖面起始点距离：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="库水位设备编号：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="干滩坡度角：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="干滩安全超高：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
<el-col :span="12">
<div class="grid-content">
<el-form-item label="排水量流速：" class="form-cell">
<div class="cell-box">
<el-input v-model="formData.xxxxx" class="cell-input"></el-input>
</div>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form>
......@@ -298,7 +482,7 @@ export default {
return {
configUrl: basePathUrl + 'config/config.json',
title: '新增',
visible: false,
visible: true,
loading: false,
page: 1,
size: 10,
......@@ -356,7 +540,7 @@ export default {
color: "#ff0000",
outline: true,
outlineColor: "#000000",
outlineWidth: 2,
outlineWidth: 5,
pixelOffsetY: -24,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
......@@ -412,6 +596,7 @@ export default {
},
cancelForm() {
this.visible = false;
this.$refs.formViewRef.resetFields();
},
tableRowClassName({row, rowIndex}) {
},
......@@ -443,8 +628,6 @@ export default {
// this.reqUpdateItem(this.form, item)
// }
alert(9999);
} else {
alert(666)
}
});
},
......
src/views/slopeMonitoring/surfaceDisplacementLog/index.vue 0 → 100644
View file @ 622ee9f7
<template>
<div class="common-page device-manage">
<div class="option page-row">
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<label class="el-form-item-label" style="font-weight: 500;">设备号</label>
<el-input v-model="query.formId" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
<label class="el-form-item-label" style="font-weight: 500;">报警状态</label>
<el-select v-model="query.stu" placeholder="请选择">
<el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
<el-date-picker
v-model="query.createTime"
type="datetimerange"
value-format="yyyy-MM-dd HH:MM:SS"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
<el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
</div>
</div>
<!-- 表格 -->
<div class="panel-bottom page-row">
<div class="ctin-box">
<div class="content-within">
<div class="content-fix">
<div class="toolbar" style="text-align:right">
<el-button size="mini" type="primary" icon="el-icon-refresh" @click="loadData">刷新</el-button>
<el-button size="mini" type="success" icon="el-icon-s-data" @click="toAdd">图表</el-button>
<el-button size="mini" type="warning" icon="el-icon-document" @click="toAdd">导出</el-button>
</div>
<div class="content">
<el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
<el-table-column prop="formId" label="设备名称" align="center"></el-table-column>
<el-table-column prop="username" label="设备编号" align="center"></el-table-column>
<el-table-column prop="carNo" label="x变化量" align="center"></el-table-column>
<el-table-column prop="carClass" label="y变化量" align="center"></el-table-column>
<el-table-column prop="createTime" label="z变化量" align="center"></el-table-column>
<el-table-column prop="createTime" label="是否报警" align="center"></el-table-column>
<el-table-column prop="createTime" label="监测时间" align="center"></el-table-column>
</el-table>
<!--分页组件-->
<el-pagination :total="total" :current-page="page" style="margin-top: 8px;"
layout="total, prev, pager, next, sizes" @size-change="sizeChange"
@current-change="pageChange"/>
</div>
</div>
</div>
</div>
</div>
<!-- 表单渲染 -->
<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="visible" :title="title" width="800px">
<el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" :status-icon="true" size="mini">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancelForm">取消</el-button>
<el-button type="primary" @click="submitForm('formViewRef', formData)">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
import mars3dViewerMap from "../../../components/mars3d/Map5.vue";
import * as mars3d from "mars3d";
import * as Cesium from "mars3d-cesium";
import kongzhidiantubiao from "../../../assets/images/cutGraph/kongzhidian1.png";
export default {
name: 'surfaceDisplacementLog',
components: {
mars3dViewerMap,
},
data() {
const basePathUrl = window.basePathUrl || ''
return {
configUrl: basePathUrl + 'config/config.json',
title: '新增',
visible: false,
loading: false,
page: 1,
size: 10,
total: 0,
query: {},
stuOpts: [
{label: '离线', value: 0},
{label: '在线', value: 1},
],
sdOptions: [
{label: '一类设备', value: 1},
{label: '二类设备', value: 2},
],
tableData: [],
formData: {
lng: '',
lat: '',
name: '',
devType: '',
devNo: '',
devUnit: '',
installDate: '',
manufactor: '',
},
rules: {
lng: {required: true, message: '请在地图上放置设备', trigger: 'blur'},
name: {required: true, message: ' ', trigger: 'blur'},
devType: {required: true, message: ' ', trigger: 'blur'},
devNo: {required: true, message: ' ', trigger: 'blur'},
devUnit: {required: true, message: ' ', trigger: 'blur'},
installDate: {required: true, message: ' ', trigger: 'blur'},
manufactor: {required: true, message: ' ', trigger: 'blur'},
},
}
},
mounted() {
this.$nextTick(() => {
this.loadData();
})
},
methods: {
onMapload(map) {
map.unbindContextMenu();
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
const graphic = new mars3d.graphic.PointEntity({
style: {
color: "#ff0000",
pixelSize: 10,
outlineColor: "#ffffff",
outlineWidth: 2,
label: {
text: "放置位置",
font_size: 18,
color: "#ff0000",
outline: true,
outlineColor: "#000000",
outlineWidth: 5,
pixelOffsetY: -24,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0
}
},
})
graphicLayer.addGraphic(graphic);
map.on(mars3d.EventType.click, (event) => {
let p = mars3d.LngLatPoint.fromCartesian(event.cartesian);
this.formData.lng = p.lng;
this.formData.lat = p.lat;
graphicLayer.eachGraphic((graphic) => {
graphic.addDynamicPosition(Cesium.Cartesian3.fromDegrees(p.lng, p.lat, 0), 0)
})
});
},
loadData() {
var sort = 'id,desc';
var param = this.query;
param.page = this.page - 1;
param.pageSize = this.size;
param.sort = sort;
this.$nextTick(() => {
//获取安检信息
HttpReq.truckDispatching.ajReportListFind(param).then((res) => {
if (res.code == 200) {
this.loading = false;
this.tableData = res.data.records;
this.total = res.data.total;
}
})
})
},
toAdd() {
this.title = '新增';
this.visible = true;
},
toEdit() {
},
toDelete(item) {
var id = item.id;
this.$confirm('确认删除该条数据吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then((e) => {
}).catch((e) => {
})
},
cancelForm() {
this.visible = false;
},
tableRowClassName({row, rowIndex}) {
},
// 点击搜索
toSearch() {
this.page = 1;
this.loadData();
},
// 重置搜索
clearLimit() {
this.query = {};
this.loadData()
},
pageChange(e) {
this.page = e
this.loadData()
},
sizeChange(e) {
this.page = 1
this.size = e
this.loadData()
},
submitForm(validateName, item) {
this.$refs[validateName].validate(valid => {
if (valid) {
// if (this.title === '新增') {
// this.reqAddItem(this.form, item)
// } else {
// this.reqUpdateItem(this.form, item)
// }
alert(9999);
} else {
alert(666)
}
});
},
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.cell-input {
//min-width: 220px;
}
.form-cell {
margin: 0 !important;
width: 100%;
}
.grid-content {
//border: 1px solid rgba(100, 100, 100, 0.1);
padding: 5px 30px;
}
.cell-box .el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
}
.cell-box .el-input.is-disabled .el-input__inner {
border: 1px solid rgba(100, 100, 100, 0.1);
background: white;
cursor: text;
}
.cell-box .el-input.is-disabled .el-input__icon {
cursor: text;
}
.cell-box .el-icon-arrow-up:before {
content: '';
}
.mapcontainer {
height: 30vh;
width: 680px;
overflow: hidden;
}
</style>
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