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

摄像头添加定位，循环遍历 

视频中心接入摄像头视频
master
yangzongjia 2 years ago
parent
dfd899f15a
commit
5a58ff9a1a
5 changed files with 1061 additions and 631 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. 7
      src/api/device/device.js
  2. 265
      src/views/index.vue
  3. 884
      src/views/monitor/videos/index.vue
  4. 31
      src/views/shebeitaizhang/shebeitaizhangAdd.vue
  5. 1
      src/views/zhiwujiance/zhiwujianceList.vue

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

@ -37,6 +37,12 @@ export function getInfoById(data) {
return request({ url: '/device/getInfoById', method: 'GET', params: data }) return request({ url: '/device/getInfoById', method: 'GET', params: data })
} }
// 获取摄像头列表
export function getSxtList() {
return request({ url: '/device/getSxtList', method: 'GET' })
}
/******************************************************************************************************************************************** */
// 创建消息消费者 // 创建消息消费者
@ -59,4 +65,3 @@ 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' })
} }

265
src/views/index.vue
View File

@ -55,8 +55,8 @@
<div class="content"> <div class="content">
<div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()"> <div class="newsli" v-for="(item, index) in Datalist" :key="index" @click="toinfo()">
<div class="dot">&bull;</div> <div class="dot">&bull;</div>
<div class="tit">{{item.title}}</div> <div class="tit">{{ item.name }}</div>
<div class="time">{{item.createTime}}</div> <div class="time">{{ item.createTime }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -69,8 +69,8 @@
<div class="content"> <div class="content">
<div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()"> <div class="newsli" v-for="(item, index) in Datalista" :key="index" @click="toinfo()">
<div class="dot">&bull;</div> <div class="dot">&bull;</div>
<div class="tit">{{item.title}}</div> <div class="tit">{{ item.title }}</div>
<div class="time">{{item.createTime}}</div> <div class="time">{{ item.createTime }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -114,7 +114,7 @@
<div class="note"><span class="redzi"></span></div> <div class="note"><span class="redzi"></span></div>
</div> </div>
<div class="bar"> <div class="bar">
<pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan> <pie-chartrenyuan :chart-data="shipinjiankong_Chart"></pie-chartrenyuan>
</div> </div>
</div> </div>
</div> </div>
@ -165,12 +165,14 @@
</template> </template>
<script> <script>
import { login1 } from '@/api/system/user/login.js' import { login1 } from '@/api/system/user/login.js'
import * as echarts from "echarts"; import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan' import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
import HomeMap from '@/views/dashboard/components/HomeMap' import HomeMap from '@/views/dashboard/components/HomeMap'
// 1.1入侵报警饼图 import { getCallPolicePage } from '@/api/callPolice/callPolice'
const ruqinbaojing_Chart = { import { init } from 'events';
// 1.1入侵报警饼图
const ruqinbaojing_Chart = {
// seriesName: '入侵报警', // seriesName: '入侵报警',
unit: '次', unit: '次',
color: ['#34ffff', '#34abff', '#4c6eff'], color: ['#34ffff', '#34abff', '#4c6eff'],
@ -190,8 +192,8 @@
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
// 1.2视频监控饼图 // 1.2视频监控饼图
const shipinjiankong_Chart = { const shipinjiankong_Chart = {
// seriesName: '视频监控', // seriesName: '视频监控',
unit: '次', unit: '次',
color: ['#fe7f02', '#049f51', '#fdc004'], color: ['#fe7f02', '#049f51', '#fdc004'],
@ -211,18 +213,18 @@
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
// 1.3门禁管理饼图 // 1.3门禁管理饼图
const menjinguanli_Chart = { const menjinguanli_Chart = {
// seriesName: '门禁管理', // seriesName: '门禁管理',
unit: '次', unit: '次',
color: [ '#FCCE10', color: ['#FCCE10',
'#E87C25', '#E87C25',
'#C1232B'], '#C1232B'],
Data: { Data: {
seriesData: [ seriesData: [
{ value: 28, name: '正常' }, { value: 28, name: '正常' },
{ value: 22, name: '离线' }, { value: 22, name: '离线' },
{ value:18, name: '报警' } { value: 18, name: '报警' }
] ]
}, },
label: { label: {
@ -234,8 +236,8 @@
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
// 1.4电子围栏饼图 // 1.4电子围栏饼图
const dianziweilan_Chart = { const dianziweilan_Chart = {
// seriesName: '电子围栏', // seriesName: '电子围栏',
unit: '次', unit: '次',
color: ['#9BCA63', color: ['#9BCA63',
@ -257,8 +259,8 @@
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
// 1.电子巡更饼图 // 1.电子巡更饼图
const dianzixungeng_Chart = { const dianzixungeng_Chart = {
// seriesName: '电子巡更', // seriesName: '电子巡更',
unit: '次', unit: '次',
color: ['#60C0DD', color: ['#60C0DD',
@ -280,21 +282,23 @@
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
export default { export default {
name: 'index', name: 'index',
components: { components: {
PieChartrenyuan,HomeMap, PieChartrenyuan, HomeMap,
}, },
created() { created() {
var _self = this var _self = this
setInterval(function () { setInterval(function () {
_self.getMessage(); _self.getMessage();
}, 20000) }, 20000)
this.init()
}, },
data() { data() {
return { return {
ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1 ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
shipinjiankong_Chart:shipinjiankong_Chart, shipinjiankong_Chart: shipinjiankong_Chart,
menjinguanli_Chart: menjinguanli_Chart, menjinguanli_Chart: menjinguanli_Chart,
dianziweilan_Chart: dianziweilan_Chart, dianziweilan_Chart: dianziweilan_Chart,
dianzixungeng_Chart: dianzixungeng_Chart, dianzixungeng_Chart: dianzixungeng_Chart,
@ -306,16 +310,20 @@
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
], ],
Datalist: [ 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: { methods: {
init() {
getCallPolicePage({ current: 1, size: 5 }).then((res) => {
console.log(res)
if (res.code == 200) {
this.Datalist = res.data.records
} else {
this.list = []
}
})
},
toMore() { toMore() {
this.$router.push({ this.$router.push({
path: '/baojingchaxun/baojingchaxunList', path: '/baojingchaxun/baojingchaxunList',
@ -355,25 +363,42 @@
// }) // })
// } // }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.zongcons{margin: 0;padding: 0;flex: 1;width: 100%;height: calc(100% - 160px);} .zongcons {
.rightbars{ margin: 0;
padding: 0;
flex: 1;
width: 100%;
height: calc(100% - 160px);
}
.rightbars {}
.zongcons .maps {
width: 100%;
height: 605px;
padding: 40px 0 0 100px;
text-align: right;
} }
.zongcons .maps{width: 100%;height: 605px;padding:40px 0 0 100px;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;align-items: flex-start; justify-content: flex-start;
width: 100%; padding: 20px; align-items: flex-start;
height: 100%;overflow-y: auto; width: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff); padding: 20px;
} height: 100%;
.tops {width: 470px; overflow-y: auto;
background: radial-gradient(#fff, #f5f7f4, #fff);
}
.tops {
width: 470px;
// display: flex; // display: flex;
// flex-direction: row; // flex-direction: row;
// flex-wrap: nowrap; // flex-wrap: nowrap;
@ -381,75 +406,96 @@
padding: 0 0 0 20px; padding: 0 0 0 20px;
margin: 0px; margin: 0px;
} }
.tops .topboxs {width: 100%;
.tops .topboxs {
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;border-radius: 5px; box-shadow: 0px 0px 10px #E9E9E9;
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; color: #333;font-size: 16px; font-weight: bold;
color: #333;
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;align-items: center; justify-content: flex-start;
align-items: center;
margin: 0; margin: 0;
padding: 35px 20px 38px 20px; padding: 35px 20px 38px 20px;
// padding: 20px ; // padding: 20px ;
} }
.topbox .mids .lefts{width: 100px;}
.topbox .mids .lefts {
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;text-align: center; font-size: 36px;
} 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 {flex: 1;
.topbox .mids .rights {
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;
@ -460,42 +506,54 @@
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;
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;border-radius: 5px; box-shadow: 0px 0px 10px #E9E9E9;
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; color: #333;font-size: 16px; font-weight: bold;
color: #333;
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;align-items: center; justify-content: flex-start;
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;
@ -503,16 +561,20 @@
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;border-radius: 5px; box-shadow: 0px 0px 10px #E9E9E9;
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;
@ -524,15 +586,21 @@
} }
.news .title .newstits { .news .title .newstits {
font-weight: bold; color: #333;font-size: 16px; font-weight: bold;
color: #333;
font-size: 16px;
} }
.news .title .more {text-align: right; .news .title .more {
cursor: pointer;color: #6c6a6a;font-size: 14px; text-align: right;
cursor: pointer;
color: #6c6a6a;
font-size: 14px;
} }
.news .content { .news .content {
padding: 10px 0; height:120px; padding: 10px 0;
height: 120px;
// height:160px; // height:160px;
overflow: hidden; overflow: hidden;
} }
@ -546,12 +614,15 @@
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;color: #047cf7; line-height: 25px;
color: #047cf7;
} }
.news .content .newsli .tit { .news .content .newsli .tit {
padding: 0px 0; padding: 0px 0;
font-size: 14px; font-size: 14px;
@ -566,8 +637,9 @@
.news .content .newsli .time { .news .content .newsli .time {
padding: 0px 0; padding: 0px 0;
color: #666666; color: #666666;
text-align: right;font-size: 14px; text-align: right;
width: 100px; font-size: 14px;
width: 200px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
} }
@ -579,14 +651,16 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
z-index: 600; z-index: 600;
top: 20px;left: 20px; top: 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;border-radius: 5px; box-shadow: 0px 0px 10px #E9E9E9;
} border-radius: 5px;
}
.wenboxs .wenbox { .wenboxs .wenbox {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -597,55 +671,54 @@
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>

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

File diff suppressed because it is too large

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

@ -57,8 +57,6 @@
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item prop=""> <el-form-item prop="">
<!-- <el-date-picker type="date" placeholder="选择日期" v-model="addForm.manufacturerCode" style="width: 410px;"
maxlength="20"></el-date-picker> -->
<el-input v-model="addForm.remarks" maxlength="20" placeholder="请填写备注" class="addinputw" clearable /> <el-input v-model="addForm.remarks" maxlength="20" placeholder="请填写备注" class="addinputw" clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -73,6 +71,35 @@
clearable /> clearable />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="4" class="tleftb">
<span>上偏移</span>
</el-col>
<el-col :span="8">
<el-form-item prop="topPosition">
<el-input v-model="addForm.topPosition" maxlength="20" placeholder="请填写上偏移" class="addinputw"
clearable />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4" class="tleftb">
<span>左偏移</span>
</el-col>
<el-col :span="8">
<el-form-item prop="leftPosition">
<el-input v-model="addForm.leftPosition" maxlength="20" placeholder="请填写左偏移" class="addinputw"
clearable />
</el-form-item>
</el-col>
<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-row>
</el-form> </el-form>
</div> </div>

1
src/views/zhiwujiance/zhiwujianceList.vue
View File

@ -288,7 +288,6 @@ export default {
this.spUrl = res.data this.spUrl = res.data
this.dialogImage = true this.dialogImage = true
}) })
}, },
handleClose() { handleClose() {
this.dialogImage = false this.dialogImage = false

Write Preview
Loading…
Cancel
Save