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

对接设备。入侵报警。拉取报警消息。摄像头抓图用来比对图片相似度 

添加网络录像机设备
master
yangzongjia 2 years ago
parent
6fbace53ee
commit
73d78d17cd
5 changed files with 482 additions and 471 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/api/call.js
  2. 5
      src/views/baojingchaxun/baojingchaxunList.vue
  3. 905
      src/views/call.vue
  4. 24
      src/views/shebeitaizhang/shebeitaizhangAdd.vue
  5. 14
      src/views/shebeitaizhang/shebeitaizhangInfo.vue

5
src/api/call.js
View File

@ -42,3 +42,8 @@ export function doCallMessageOffsets(data) {
export function getCallZoneStatusList(data) { export function getCallZoneStatusList(data) {
return request({ url: '/call/getCallZoneStatusList', method: 'GET'}) return request({ url: '/call/getCallZoneStatusList', method: 'GET'})
} }
// 临时测试
export function callTempFunc() {
return request({ url: '/call/callTempFunc', method: 'GET'})
}

5
src/views/baojingchaxun/baojingchaxunList.vue
View File

@ -187,11 +187,12 @@ export default {
}, },
init() { init() {
getCallPolicePage(this.listQuery).then((res) => { getCallPolicePage(this.listQuery).then((res) => {
console.log(res)
if (res.code == 200) { if (res.code == 200) {
// this.list = res.data.records this.list = res.data.records
this.total = res.total this.total = res.total
} else { } else {
// this.list = [] this.list = []
} }
}) })
}, },

905
src/views/call.vue
View File

@ -79,7 +79,7 @@
<div class="rights"> <div class="rights">
<div class="note" @click="getMessageList">拉取消息：<span class="bluezi">38</span></div> <div class="note" @click="getMessageList">拉取消息：<span class="bluezi">38</span></div>
<div class="note" @click="doMessageOffsets">手动提交消息偏移量：<span class="huizi">15</span></div> <div class="note" @click="doMessageOffsets">手动提交消息偏移量：<span class="huizi">15</span></div>
<div class="note">消费者ID：<span class="redzi">{{consumerId}}</span></div> <div class="note" @click="tempFunc">消费者ID：<span class="redzi">{{ consumerId }}</span></div>
</div> </div>
<div class="bar"> <div class="bar">
</div> </div>
@ -112,455 +112,470 @@
</template> </template>
<script> <script>
import { login1 } from '@/api/system/user/login.js' import { login1 } from '@/api/system/user/login.js'
import { getCallToken, getCallSonList, getCallArm, getCallDisArm, createCallConsumer, getCallMessageList, doCallMessageOffsets,getCallZoneStatusList } from '@/api/call.js' import {
import * as echarts from "echarts"; getCallToken,
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan' getCallSonList,
import HomeMap from '@/views/dashboard/components/HomeMap' getCallArm,
export default { getCallDisArm,
name: 'index', createCallConsumer,
components: { getCallMessageList,
PieChartrenyuan, HomeMap, doCallMessageOffsets,
getCallZoneStatusList,
callTempFunc
} from '@/api/call.js'
import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
import HomeMap from '@/views/dashboard/components/HomeMap'
export default {
name: 'index',
components: {
PieChartrenyuan, HomeMap,
},
created() {
var _self = this
},
data() {
return {
token: '',
consumerId: '',
Datalista: [
{ title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' },
],
Datalist: [
{ title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' },
],
}
},
methods: {
getToken() {
getCallToken().then(res => {
console.log(res)
})
}, },
created() { getSonList() {
var _self = this getCallSonList().then(res => {
console.log(res)
})
}, },
data() { subSystemArm() {
return { getCallArm().then(res => {
token: '', console.log(res)
consumerId: '', })
Datalista: [ },
{ title: '您有新任务了', createTime: '2023-05-23' }, subSystemDisArm() {
{ title: '您有新任务了', createTime: '2023-05-23' }, getCallDisArm().then(res => {
{ title: '您有新任务了', createTime: '2023-05-23' }, console.log(res)
{ title: '您有新任务了', createTime: '2023-05-23' }, })
{ title: '您有新任务了', createTime: '2023-05-23' }, },
], createConsumer() {
Datalist: [ createCallConsumer().then(res => {
{ title: '您有新消息了', createTime: '2023-05-23' }, this.consumerId = res.data.consumerId
{ title: '您有新消息了', createTime: '2023-05-23' }, })
{ title: '您有新消息了', createTime: '2023-05-23' }, },
{ title: '您有新消息了', createTime: '2023-05-23' }, getMessageList() {
{ title: '您有新消息了', createTime: '2023-05-23' }, getCallMessageList({ consumerId: this.consumerId }).then(res => {
], console.log(res)
} })
},
doMessageOffsets() {
doCallMessageOffsets({ consumerId: this.consumerId }).then(res => {
console.log(res)
})
},
tempFunc() {
callTempFunc().then(res => {
console.log(res)
})
},
getZoneStatusList() {
getCallZoneStatusList().then(res => {
console.log(res)
})
},
toMore() {
this.$router.push({
path: '/baojingchaxun/baojingchaxunList',
})
},
getMessage() {
this.$notify({
title: '报警消息',
dangerouslyUseHTMLString: true,
message: " <div style='display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items:center;margin: 0 auto;height:60px;line-height: 60px;'><img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span></div>",
position: 'bottom-right',
onClick: () => {
alert("这是一条新订单")
},
duration: 3000,
})
}, },
methods: {
getToken() {
getCallToken().then(res => {
console.log(res)
})
},
getSonList() {
getCallSonList().then(res => {
console.log(res)
})
},
subSystemArm() {
getCallArm().then(res => {
console.log(res)
})
},
subSystemDisArm() {
getCallDisArm().then(res => {
console.log(res)
})
},
createConsumer() {
createCallConsumer().then(res => {
this.consumerId = res.data.consumerId
})
},
getMessageList() {
getCallMessageList({ consumerId: this.consumerId }).then(res => {
console.log(res)
})
},
doMessageOffsets() {
doCallMessageOffsets({ consumerId: this.consumerId }).then(res => {
console.log(res)
})
},
getZoneStatusList(){
getCallZoneStatusList().then(res => {
console.log(res)
})
},
toMore() {
this.$router.push({
path: '/baojingchaxun/baojingchaxunList',
})
},
getMessage() {
this.$notify({
title: '报警消息',
dangerouslyUseHTMLString: true,
message: " <div style='display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items:center;margin: 0 auto;height:60px;line-height: 60px;'><img style='width:40px;height:40px;margin: 0 10px 0 0;' src='/image/yujing.png'>" + "<span style='display: inline-block;margin: 0 0px 0 0;height:40px;line-height: 40px;font-weight: bold;'>新的报警待处理</span></div>",
position: 'bottom-right',
onClick: () => {
alert("这是一条新订单")
},
duration: 3000,
})
},
}
} }
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.zongcons { .zongcons {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex: 1; flex: 1;
width: 100%; width: 100%;
height: calc(100% - 160px); height: calc(100% - 160px);
} }
.rightbars {} .rightbars {}
.zongcons .maps { .zongcons .maps {
width: 100%; width: 100%;
height: 605px; height: 605px;
padding: 40px 0 0 100px; padding: 40px 0 0 100px;
text-align: right; text-align: right;
} }
.webindex { .webindex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
padding: 20px; padding: 20px;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
background: radial-gradient(#fff, #f5f7f4, #fff); background: radial-gradient(#fff, #f5f7f4, #fff);
} }
.tops { .tops {
width: 470px; width: 470px;
// display: flex; // display: flex;
// flex-direction: row; // flex-direction: row;
// flex-wrap: nowrap; // flex-wrap: nowrap;
// justify-content: flex-start;align-items: flex-start; // justify-content: flex-start;align-items: flex-start;
padding: 0 0 0 20px; padding: 0 0 0 20px;
margin: 0px; margin: 0px;
} }
.tops .topboxs { .tops .topboxs {
width: 100%; width: 100%;
padding: 0px 0px 15px 0 !important; padding: 0px 0px 15px 0 !important;
} }
.topbox { .topbox {
// width: 25%; // width: 25%;
//margin: 20px 20 0 0 !important; //margin: 20px 20 0 0 !important;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9; box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px; border-radius: 5px;
padding: 20px 10px 21px 10px; padding: 20px 10px 21px 10px;
} }
// .tops .topbox:last-of-type { // .tops .topbox:last-of-type {
// margin: 0; // margin: 0;
// } // }
.topbox .toptitle { .topbox .toptitle {
font-size: 20px; font-size: 20px;
padding: 10px 20px; padding: 10px 20px;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #ececee; border-bottom: 1px solid #ececee;
} }
.topbox .mids { .topbox .mids {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 35px 20px 38px 20px; padding: 35px 20px 38px 20px;
// padding: 20px ; // padding: 20px ;
} }
.topbox .mids .lefts { .topbox .mids .lefts {
width: 100px; width: 100px;
} }
.topbox .mids .lefts .iconbox { .topbox .mids .lefts .iconbox {
border-radius: 10px; border-radius: 10px;
line-height: 80px; line-height: 80px;
width: 80px; width: 80px;
height: 80px; height: 80px;
color: #fff; color: #fff;
font-size: 36px; font-size: 36px;
text-align: center; text-align: center;
} }
.iconbox_red { .iconbox_red {
background-color: #df2f07; background-color: #df2f07;
} }
.iconbox_yellow { .iconbox_yellow {
background-color: #ff7521; background-color: #ff7521;
} }
.iconbox_green { .iconbox_green {
background-color: #07C160; background-color: #07C160;
} }
.iconbox_blue { .iconbox_blue {
background-color: #3f9bfa; background-color: #3f9bfa;
} }
.iconbox_zi { .iconbox_zi {
background-color: #6421ff; background-color: #6421ff;
} }
.iconbox_fen { .iconbox_fen {
background-color: #9b2efb; background-color: #9b2efb;
} }
.topbox .mids .rights { .topbox .mids .rights {
flex: 1; flex: 1;
padding: 2px 0 2px 10px; padding: 2px 0 2px 10px;
} }
.topbox .mids .rights .note { .topbox .mids .rights .note {
color: #333; color: #333;
font-size: 14px; font-size: 14px;
padding: 0 0 3px 0; padding: 0 0 3px 0;
} }
.topbox .mids .rights .note span { .topbox .mids .rights .note span {
font-size: 20px; font-size: 20px;
padding: 0 5px; padding: 0 5px;
} }
/* 饼图部分 */ /* 饼图部分 */
.tbars { .tbars {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
margin: 0; margin: 0;
padding: 20px 0 0 0; padding: 20px 0 0 0;
} }
.tbar { .tbar {
width: 25%; width: 25%;
margin: 0 20px 0 0; margin: 0 20px 0 0;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9; box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
} }
.tbar:last-of-type { .tbar:last-of-type {
margin: 0; margin: 0;
} }
.tbar0 { .tbar0 {
border-bottom: 0px solid #032ab8; border-bottom: 0px solid #032ab8;
} }
.tbar .title { .tbar .title {
font-size: 20px; font-size: 20px;
padding: 10px 20px; padding: 10px 20px;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
font-size: 16px; font-size: 16px;
border-bottom: 1px solid #ececee; border-bottom: 1px solid #ececee;
} }
.tbar .title span { .tbar .title span {
padding: 0 10px 0 0; padding: 0 10px 0 0;
} }
.tbar .bar { .tbar .bar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0px; padding: 0px;
height: 190px; height: 190px;
} }
.con { .con {
padding: 10px 0 0 0; padding: 10px 0 0 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-around; justify-content: space-around;
} }
.news { .news {
width: calc(100% / 2); width: calc(100% / 2);
margin: 0 20px 0 0; margin: 0 20px 0 0;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9; box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
} }
.news:last-of-type { .news:last-of-type {
margin: 0; margin: 0;
} }
.news .title { .news .title {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 10px 10px 20px; padding: 10px 10px 10px 20px;
border-bottom: 1px solid #ececee; border-bottom: 1px solid #ececee;
} }
.news .title .newstits { .news .title .newstits {
font-weight: bold; font-weight: bold;
color: #333; color: #333;
font-size: 16px; font-size: 16px;
} }
.news .title .more { .news .title .more {
text-align: right; text-align: right;
cursor: pointer; cursor: pointer;
color: #6c6a6a; color: #6c6a6a;
font-size: 14px; font-size: 14px;
} }
.news .content { .news .content {
padding: 10px 0; padding: 10px 0;
height: 120px; height: 120px;
// height:160px; // height:160px;
overflow: hidden; overflow: hidden;
} }
.news .content .newsli { .news .content .newsli {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
margin: 0px 0px; margin: 0px 0px;
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid #ececee; border-bottom: 1px solid #ececee;
} }
.news .content .newsli .dot { .news .content .newsli .dot {
padding: 0px 8px 0 0; padding: 0px 8px 0 0;
font-size: 18px; font-size: 18px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
color: #047cf7; color: #047cf7;
} }
.news .content .newsli .tit { .news .content .newsli .tit {
padding: 0px 0; padding: 0px 0;
font-size: 14px; font-size: 14px;
flex: 3; flex: 3;
height: 25px; height: 25px;
overflow: hidden; overflow: hidden;
line-height: 25px; line-height: 25px;
cursor: pointer; cursor: pointer;
} }
// .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;} // .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;}
.news .content .newsli .time { .news .content .newsli .time {
padding: 0px 0; padding: 0px 0;
color: #666666; color: #666666;
text-align: right; text-align: right;
font-size: 14px; font-size: 14px;
width: 100px; width: 100px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
} }
///// /////
.wenboxs { .wenboxs {
padding: 20px; padding: 20px;
margin: 0; margin: 0;
position: absolute; position: absolute;
z-index: 600; z-index: 600;
top: 20px; top: 20px;
left: 20px; left: 20px;
// background-color: rgba($color: #ffffff, $alpha: 0.7); // background-color: rgba($color: #ffffff, $alpha: 0.7);
// box-shadow: 0px 0px 6px #0d27c2; // box-shadow: 0px 0px 6px #0d27c2;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9; box-shadow: 0px 0px 10px #E9E9E9;
border-radius: 5px; border-radius: 5px;
} }
.wenboxs .wenbox { .wenboxs .wenbox {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
color: #8d8e90; color: #8d8e90;
padding: 10px; padding: 10px;
border-bottom: 1px solid #E9E9E9; border-bottom: 1px solid #E9E9E9;
} }
.wenboxs .wenbox:last-of-type { .wenboxs .wenbox:last-of-type {
border-bottom: 0px solid #E9E9E9; border-bottom: 0px solid #E9E9E9;
} }
.wenbox .tubiao { .wenbox .tubiao {
margin: 0 5px; margin: 0 5px;
font-size: 18px; font-size: 18px;
// color: #b7d8fa; // color: #b7d8fa;
padding: 0 5px 0 0; padding: 0 5px 0 0;
} }
.wenbox .tubiao .tolzi { .wenbox .tubiao .tolzi {
color: #3f9bfa; color: #3f9bfa;
font-size: 40px; font-size: 40px;
} }
.bluezi { .bluezi {
// color: #042d6a; // color: #042d6a;
font-size: 18px !important; font-size: 18px !important;
} }
.wenbox .tos { .wenbox .tos {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
color: #474848; color: #474848;
padding: 0; padding: 0;
text-align: left; text-align: left;
} }
.wenbox .tos .tit { .wenbox .tos .tit {
margin: 0; margin: 0;
font-size: 14px; font-size: 14px;
// color: #6f7172; // color: #6f7172;
padding: 0 0 10px 0; padding: 0 0 10px 0;
} }
.wenbox .tos .nums { .wenbox .tos .nums {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.wenbox .tos .nums .num { .wenbox .tos .nums .num {
font-size: 20px; font-size: 20px;
padding: 0 5px; padding: 0 5px;
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
color: #fc6f04; color: #fc6f04;
} }
</style> </style>

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

@ -15,20 +15,28 @@
<div>编辑信息</div> <div>编辑信息</div>
</div> </div>
<el-row> <el-row>
<el-col :span="4" class="tleftb"> <!-- <el-col :span="4" class="tleftb">
<span><span class="icon">*</span>设备验证码</span> <span><span class="icon">*</span>设备验证码</span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item prop="vCode"> <el-form-item prop="vCode">
<el-input v-model="addForm.vCode" maxlength="20" placeholder="请填写设备验证码" class="addinputw" clearable /> <el-input v-model="addForm.vCode" maxlength="20" placeholder="请填写设备验证码" class="addinputw" clearable />
</el-form-item> </el-form-item>
</el-col> -->
<el-col :span="4" class="tleftb">
<span><span class="icon">*</span>设备名称</span>
</el-col>
<el-col :span="8">
<el-form-item prop="name">
<el-input v-model="addForm.name" maxlength="20" placeholder="请填写设备名称" class="addinputw" clearable />
</el-form-item>
</el-col> </el-col>
<el-col :span="4" class="tleftb"> <el-col :span="4" class="tleftb">
<span>设备位置</span> <span>设备位置</span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item> <el-form-item>
<el-input v-model="addForm.posotion" maxlength="20" placeholder="请填写设备位置 " class="addinputw" clearable /> <el-input v-model="addForm.position" maxlength="20" placeholder="请填写设备位置 " class="addinputw" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@ -55,15 +63,7 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <!-- <el-row>
<el-col :span="4" class="tleftb">
<span><span class="icon">*</span>设备名称</span>
</el-col>
<el-col :span="8">
<el-form-item prop="name">
<el-input v-model="addForm.name" maxlength="20" placeholder="请填写设备名称" class="addinputw" clearable />
</el-form-item>
</el-col>
<el-col :span="4" class="tleftb"> <el-col :span="4" class="tleftb">
<span><span class="icon">*</span>设备序列号</span> <span><span class="icon">*</span>设备序列号</span>
</el-col> </el-col>
@ -73,7 +73,7 @@
clearable /> clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row> -->
</el-form> </el-form>
</div> </div>
</div> </div>

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

@ -14,11 +14,11 @@
</div> </div>
<el-row> <el-row>
<el-col :span="4" class="tleftb"> <el-col :span="4" class="tleftb">
<span>设备验证码</span> <span>设备名称</span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item> <el-form-item>
<span>{{ infoForm.vCode }}</span> <span>{{ infoForm.name }}</span>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" class="tleftb"> <el-col :span="4" class="tleftb">
@ -48,16 +48,6 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>设备名称</span>
</el-col>
<el-col :span="8">
<el-form-item>
<span>{{ infoForm.name }}</span>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row> <!-- <el-row>
<el-col :span="4" class="tleftb"> <el-col :span="4" class="tleftb">
<span>状态</span> <span>状态</span>

Write Preview
Loading…
Cancel
Save