jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

websocket推送报警消息 

定时主动查询设备状态并且修改数据库
master
yangzongjia 2 years ago
parent
0fce076b17
commit
4d76f71c62
5 changed files with 71 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/api/device/device.js
  2. 14
      src/views/index.vue
  3. 52
      src/views/monitor/videos/index.vue
  4. 19
      src/views/shebeitaizhang/shebeitaizhangAdd.vue
  5. 10
      src/views/shebeitaizhang/shebeitaizhangInfo.vue

5
src/api/device/device.js
View File

@ -62,6 +62,11 @@ export function sysDisArm(data) {
return request({ url: '/device/sysDisArm', method: 'GET', params: data })
}
// 报警确认
export function notCall(data) {
return request({ url: '/device/notCall', method: 'GET', params: data })
}
// 获取设备状态数量
export function getStatusCount(data) {
return request({ url: '/device/getStatusCount', method: 'GET', params: data })

14
src/views/index.vue
View File

@ -109,9 +109,8 @@
<div class="icon myiconfont iconbox iconbox_blue">&#xe64a;</div>
</div>
<div class="rights">
<div class="note">正常：<span class="bluezi">{{ statusDataSp.online }}</span></div>
<div class="note">离线：<span class="huizi">{{ statusDataSp.offline == null ? 0 : statusDataSp.offline
}}</span>
<div class="note">正常：<span class="bluezi">{{ statusDataSp.online == null ? 0 : statusDataSp.online }}</span></div>
<div class="note">离线：<span class="huizi">{{ statusDataSp.offline == null ? 0 : statusDataSp.offline }}</span>
</div>
<div class="note"><span class="redzi"></span></div>
</div>
@ -132,7 +131,7 @@
<div class="rights">
<div class="note">正常：<span class="bluezi">38</span></div>
<div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div>
<!-- <div class="note">报警：<span class="redzi">12</span></div> -->
</div>
<div class="bar">
<pie-chartrenyuan :chart-data="menjinguanli_Chart"></pie-chartrenyuan>
@ -149,9 +148,8 @@
<div class="icon myiconfont iconbox iconbox_red">&#xe9f7;</div>
</div>
<div class="rights">
<div class="note">正常：<span class="bluezi">{{ statusDataWl.online }}</span></div>
<div class="note">离线：<span class="huizi">{{ statusDataWl.offline == null ? 0 : statusDataWl.offline
}}</span></div>
<div class="note">正常：<span class="bluezi">{{ statusDataWl.online == null ? 0 : statusDataWl.online }}</span></div>
<div class="note">离线：<span class="huizi">{{ statusDataWl.offline == null ? 0 : statusDataWl.offline }}</span></div>
<!-- <div class="note">报警：<span class="redzi">11</span></div> -->
</div>
<div class="bar">
@ -232,7 +230,7 @@ const menjinguanli_Chart = {
seriesData: [
{ value: 38, name: '正常' },
{ value: 15, name: '离线' },
{ value: 12, name: '报警' }
// { value: 12, name: '报警' }
]
},
label: {

52
src/views/monitor/videos/index.vue
View File

@ -57,12 +57,30 @@
<p @click="toMore()">旁路</p>
</div>
</div> -->
<!-- 111end -->
<!-- 222视频监控 -->
<!-- 视频监控 -->
<div class="ruqinbaojingcss" v-if="showShipinjiankong" v-for="(item, index) in zc_list">
<!-- <div class="myiconfont huizibg jingicon shipin_lixian1" v-if="showShipinjiankong_lixian">&#xe644;</div>
<div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div> -->
<div class="shipincss Shipin_yingzi blockDiv" v-if="showShipinjiankong_zhengchang">
<!-- 灰色的 离线 -->
<!-- <div class="myiconfont huizibg jingicon shipin_lixian1 blockDiv"
v-if="showShipinjiankong_lixian && item.status == '0'">&#xe644;
<div class="jingicon shipin_zhengchang" :style="{ top: item.topPosition, left: item.leftPosition }"
v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter"
@mouseleave="leave" @click.stop="openshipinShipinjiankong(index)"></div>
<div class="seencons shipin_out noneDiv2" v-if="active == index">
<p @click="getVedioPcLive(item.id)">实时视频</p>
<p @click="getVedioPcRec(item.id)">回放视频</p>
</div>
<div class="seenconsc shipin_out noneDiv">
<p>设备名称：123123</p>
<p>设备名称：{{ item.name }}</p>
<p>设备编号：{{ item.channelNo }}</p>
</div>
</div>
</div> -->
<!-- 红色的 报警 -->
<!-- <div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div> -->
<!-- 蓝色的 在线 && item.status == '1' -->
<div class="shipincss Shipin_yingzi blockDiv" v-if="showShipinjiankong_zhengchang">
<div class="jingicon shipin_zhengchang" :style="{ top: item.topPosition, left: item.leftPosition }"
v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter"
@ -73,13 +91,12 @@
</div>
<div class="seenconsc shipin_out noneDiv">
<p>设备名称：{{ item.name }}</p>
<p>设备编号：{{ item.number }}</p>
<p>设备通道：{{ item.channelNo }}</p>
</div>
</div>
</div>
</div>
<!-- 2222end -->
<!-- 333门禁管理 -->
<!-- 门禁管理 -->
<!-- <div class="ruqinbaojingcss" v-if="showMenjinguanli">
<div class="Menjincss Menjin_yingzi" v-if="showMenjinguanli_zhengchang">
<div class="myiconfont bluezibg jingicon menjin_zhengchang1" v-if="showMenjinguanli_zhengchang" @click="openshipinMenjinguanli()">&#xe60b;</div>
@ -116,7 +133,7 @@
<div class="seencons shipin_out" v-if="activeDzwl == index">
<p @click="openArm(item.id)">布防</p>
<p @click="disArm(item.id)">撤防</p>
<p @click="noCall(item)">报警确认</p>
<p @click="noCall(item.id)">报警确认</p>
</div>
</div>
</div>
@ -149,7 +166,7 @@
<div class="more">
<p class="bluezi">正常</p>
<span class="myiconfont iconbox bluezibg">&#xe651;</span><span class="numzi bluezi">{{
statusData.online }}</span>
statusData.online == null ? 0 : statusData.online }}</span>
</div>
</el-checkbox-button>
<el-checkbox-button checked label="备选项2" border @change="open_lixian()">
@ -374,8 +391,8 @@ export default {
})
},
bodyCloseMenus() {
console.log(111111)
this.active = -1
this.activeDzwl = -1
},
handleClose() {
this.dialogImage = false
@ -429,8 +446,15 @@ export default {
this.$message({ showClose: true, type: 'success', message: res.msg })
})
},
noCall() {
noCall(id) {
this.activeDzwl = -1
sysDisArm({ id: id }).then(res => {
if (res.code == 200) {
sysArm({ id: id }).then(resp => {
this.$message({ showClose: true, type: 'success', message: res.msg })
})
}
})
},
openruqinbaojing() {
this.showRuqinbaojing = !this.showRuqinbaojing
@ -935,7 +959,7 @@ export default {
padding: 0px;
text-align: center;
z-index: 20;
background-color: red;
}
@ -1111,8 +1135,6 @@ export default {
.shipinstu .shipin_lixian1 {
position: absolute;
top: 78%;
left: 2%;
}
.shipinstu .shipin_zhengchang2 {

19
src/views/shebeitaizhang/shebeitaizhangAdd.vue
View File

@ -138,11 +138,11 @@
</el-form-item>
</el-col>
<el-col :span="4" class="tleftb">
<span>摄像头编数</span>
<span>摄像头通道号</span>
</el-col>
<el-col :span="8">
<el-form-item prop="channelNo">
<el-input v-model="addForm.channelNo" maxlength="20" placeholder="请填写摄像头编数,比如：1,2,3,4" class="addinputw"
<el-input v-model="addForm.channelNo" maxlength="20" placeholder="请填写摄像头通道号,比如：1,2,3,4" class="addinputw"
clearable />
</el-form-item>
</el-col>
@ -169,6 +169,17 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="dzwlFlag">
<el-col :span="4" class="tleftb">
<span>通道号</span>
</el-col>
<el-col :span="8">
<el-form-item prop="channelNo">
<el-input v-model="addForm.channelNo" maxlength="20" placeholder="例如1,2,3,4" class="addinputw"
clearable />
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>
@ -325,7 +336,6 @@ export default {
this.dialogStatus = param.typeSubmit
this.addForm = param.info
this.addForm.vCode = param.info.vcode
if (this.addForm.type == '1') {
this.sxtFlag = true
} else if (this.addForm.type == '2') {
@ -356,9 +366,6 @@ export default {
} else if (this.dialogStatus === 'edit') {
this.addForm.createTime = null
this.addForm.status = null
if (this.addForm.type != '1') {
this.addForm.channelNo = null
}
updateDevice(this.addForm).then(resp => {
this.submitdisabled = false
if (resp.code == 200) {

10
src/views/shebeitaizhang/shebeitaizhangInfo.vue
View File

@ -134,6 +134,16 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="dzwlFlag">
<el-col :span="4" class="tleftb">
<span>通道号</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.channelNo }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</div>

Write Preview
Loading…
Cancel
Save