Browse Source

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

视频中心接入摄像头视频
master
yangzongjia 2 years ago
parent
commit
5a58ff9a1a
  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

@ -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

@ -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

File diff suppressed because it is too large

31
src/views/shebeitaizhang/shebeitaizhangAdd.vue

@ -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

@ -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

Loading…
Cancel
Save