-
+
{{ title }}
-
-
- 
+
+
+ 
+ 
全部
-
- 
- 球机
+
+ 
+ 
+ 摄像头
-
- 
- 枪机
+
+ 
+ 
+ 电子围栏
-
- 
- 人脸识别
+
+ 
+ 
+ 温湿度
-
- 
- 车牌识别
+
+ 
+ 
+ 烟感
-
- 
- 周界
+
+ 
+ 
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/assets/overview_images/alarm-1366.png b/src/assets/overview_images/alarm-1366.png
new file mode 100644
index 0000000..6c10353
--- /dev/null
+++ b/src/assets/overview_images/alarm-1366.png
Binary files differ
diff --git a/src/assets/overview_images/closed-1366.png b/src/assets/overview_images/closed-1366.png
new file mode 100644
index 0000000..7e46adf
--- /dev/null
+++ b/src/assets/overview_images/closed-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info-1366.png b/src/assets/overview_images/dev-info-1366.png
new file mode 100644
index 0000000..ca56e9b
--- /dev/null
+++ b/src/assets/overview_images/dev-info-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info.png b/src/assets/overview_images/dev-info.png
new file mode 100644
index 0000000..fd31e2b
--- /dev/null
+++ b/src/assets/overview_images/dev-info.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked-1366.png b/src/assets/overview_images/dev-type-border-checked-1366.png
new file mode 100644
index 0000000..2f01fce
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked.png b/src/assets/overview_images/dev-type-border-checked.png
new file mode 100644
index 0000000..045df39
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked-1366.png b/src/assets/overview_images/dev-type-border-unchecked-1366.png
new file mode 100644
index 0000000..e1deac0
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked.png b/src/assets/overview_images/dev-type-border-unchecked.png
new file mode 100644
index 0000000..b66c9fb
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-checked.png b/src/assets/overview_images/icons/icon-all-checked.png
new file mode 100644
index 0000000..9511644
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-unchecked.png b/src/assets/overview_images/icons/icon-all-unchecked.png
new file mode 100644
index 0000000..ac6ec4d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all.png b/src/assets/overview_images/icons/icon-all.png
deleted file mode 100644
index 9511644..0000000
--- a/src/assets/overview_images/icons/icon-all.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-checked.png b/src/assets/overview_images/icons/icon-camera-checked.png
new file mode 100644
index 0000000..5d2d150
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-point.png b/src/assets/overview_images/icons/icon-camera-point.png
new file mode 100644
index 0000000..b6700bf
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-point.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-unchecked.png b/src/assets/overview_images/icons/icon-camera-unchecked.png
new file mode 100644
index 0000000..8b6d384
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera.png b/src/assets/overview_images/icons/icon-camera.png
deleted file mode 100644
index 8b6d384..0000000
--- a/src/assets/overview_images/icons/icon-camera.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-checked.png b/src/assets/overview_images/icons/icon-fence-checked.png
new file mode 100644
index 0000000..f2074a9
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-unchecked.png b/src/assets/overview_images/icons/icon-fence-unchecked.png
new file mode 100644
index 0000000..1c8b34d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence.png b/src/assets/overview_images/icons/icon-fence.png
deleted file mode 100644
index 1c8b34d..0000000
--- a/src/assets/overview_images/icons/icon-fence.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-iris.png b/src/assets/overview_images/icons/icon-iris.png
deleted file mode 100644
index bc33109..0000000
--- a/src/assets/overview_images/icons/icon-iris.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-checked.png b/src/assets/overview_images/icons/icon-smoking-checked.png
new file mode 100644
index 0000000..2110112
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-unchecked.png b/src/assets/overview_images/icons/icon-smoking-unchecked.png
new file mode 100644
index 0000000..b671245
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking.png b/src/assets/overview_images/icons/icon-smoking.png
deleted file mode 100644
index b671245..0000000
--- a/src/assets/overview_images/icons/icon-smoking.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-checked.png b/src/assets/overview_images/icons/icon-sound-checked.png
new file mode 100644
index 0000000..c6d4625
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-unchecked.png b/src/assets/overview_images/icons/icon-sound-unchecked.png
new file mode 100644
index 0000000..7dc8a9d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound.png b/src/assets/overview_images/icons/icon-sound.png
new file mode 100644
index 0000000..bc33109
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-checked.png b/src/assets/overview_images/icons/icon-temperature-checked.png
new file mode 100644
index 0000000..aea5ce7
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-unchecked.png b/src/assets/overview_images/icons/icon-temperature-unchecked.png
new file mode 100644
index 0000000..8c5755f
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature.png b/src/assets/overview_images/icons/icon-temperature.png
deleted file mode 100644
index 8c5755f..0000000
--- a/src/assets/overview_images/icons/icon-temperature.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/normal-1366.png b/src/assets/overview_images/normal-1366.png
new file mode 100644
index 0000000..31eecfc
--- /dev/null
+++ b/src/assets/overview_images/normal-1366.png
Binary files differ
diff --git a/src/assets/overview_images/offline-1366.png b/src/assets/overview_images/offline-1366.png
new file mode 100644
index 0000000..ef43859
--- /dev/null
+++ b/src/assets/overview_images/offline-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border-1366.png b/src/assets/overview_images/sub-tab-border-1366.png
new file mode 100644
index 0000000..21c13c1
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border.png b/src/assets/overview_images/sub-tab-border.png
new file mode 100644
index 0000000..008d28d
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider-1366.png b/src/assets/overview_images/sub-tab-guider-1366.png
new file mode 100644
index 0000000..8950768
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider.png b/src/assets/overview_images/sub-tab-guider.png
new file mode 100644
index 0000000..8080266
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg-1366.png b/src/assets/overview_images/tab-bottom-bg-1366.png
new file mode 100644
index 0000000..c1cf920
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg.png b/src/assets/overview_images/tab-bottom-bg.png
new file mode 100644
index 0000000..1c2c817
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked-1366.png b/src/assets/overview_images/tab-index-checked-1366.png
new file mode 100644
index 0000000..2171e1c
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked.png b/src/assets/overview_images/tab-index-checked.png
new file mode 100644
index 0000000..22f316b
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked-1366.png b/src/assets/overview_images/tab-index-unchecked-1366.png
new file mode 100644
index 0000000..59657f2
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked.png b/src/assets/overview_images/tab-index-unchecked.png
new file mode 100644
index 0000000..2a247c0
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg-1366.png b/src/assets/overview_images/tab-top-bg-1366.png
new file mode 100644
index 0000000..74fd852
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg.png b/src/assets/overview_images/tab-top-bg.png
new file mode 100644
index 0000000..068c663
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg.png
Binary files differ
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index abcd3ca..0d784b0 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const fenceSysRouters = [
{
path: '/fence',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/fence/video',
+ component: Layout,
+ redirect: '/fence/video/monitor',
+ name: 'FenceVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/fence/video'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/video/monitor',
+ name: 'FenceVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/assets/overview_images/alarm-1366.png b/src/assets/overview_images/alarm-1366.png
new file mode 100644
index 0000000..6c10353
--- /dev/null
+++ b/src/assets/overview_images/alarm-1366.png
Binary files differ
diff --git a/src/assets/overview_images/closed-1366.png b/src/assets/overview_images/closed-1366.png
new file mode 100644
index 0000000..7e46adf
--- /dev/null
+++ b/src/assets/overview_images/closed-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info-1366.png b/src/assets/overview_images/dev-info-1366.png
new file mode 100644
index 0000000..ca56e9b
--- /dev/null
+++ b/src/assets/overview_images/dev-info-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info.png b/src/assets/overview_images/dev-info.png
new file mode 100644
index 0000000..fd31e2b
--- /dev/null
+++ b/src/assets/overview_images/dev-info.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked-1366.png b/src/assets/overview_images/dev-type-border-checked-1366.png
new file mode 100644
index 0000000..2f01fce
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked.png b/src/assets/overview_images/dev-type-border-checked.png
new file mode 100644
index 0000000..045df39
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked-1366.png b/src/assets/overview_images/dev-type-border-unchecked-1366.png
new file mode 100644
index 0000000..e1deac0
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked.png b/src/assets/overview_images/dev-type-border-unchecked.png
new file mode 100644
index 0000000..b66c9fb
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-checked.png b/src/assets/overview_images/icons/icon-all-checked.png
new file mode 100644
index 0000000..9511644
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-unchecked.png b/src/assets/overview_images/icons/icon-all-unchecked.png
new file mode 100644
index 0000000..ac6ec4d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all.png b/src/assets/overview_images/icons/icon-all.png
deleted file mode 100644
index 9511644..0000000
--- a/src/assets/overview_images/icons/icon-all.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-checked.png b/src/assets/overview_images/icons/icon-camera-checked.png
new file mode 100644
index 0000000..5d2d150
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-point.png b/src/assets/overview_images/icons/icon-camera-point.png
new file mode 100644
index 0000000..b6700bf
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-point.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-unchecked.png b/src/assets/overview_images/icons/icon-camera-unchecked.png
new file mode 100644
index 0000000..8b6d384
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera.png b/src/assets/overview_images/icons/icon-camera.png
deleted file mode 100644
index 8b6d384..0000000
--- a/src/assets/overview_images/icons/icon-camera.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-checked.png b/src/assets/overview_images/icons/icon-fence-checked.png
new file mode 100644
index 0000000..f2074a9
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-unchecked.png b/src/assets/overview_images/icons/icon-fence-unchecked.png
new file mode 100644
index 0000000..1c8b34d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence.png b/src/assets/overview_images/icons/icon-fence.png
deleted file mode 100644
index 1c8b34d..0000000
--- a/src/assets/overview_images/icons/icon-fence.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-iris.png b/src/assets/overview_images/icons/icon-iris.png
deleted file mode 100644
index bc33109..0000000
--- a/src/assets/overview_images/icons/icon-iris.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-checked.png b/src/assets/overview_images/icons/icon-smoking-checked.png
new file mode 100644
index 0000000..2110112
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-unchecked.png b/src/assets/overview_images/icons/icon-smoking-unchecked.png
new file mode 100644
index 0000000..b671245
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking.png b/src/assets/overview_images/icons/icon-smoking.png
deleted file mode 100644
index b671245..0000000
--- a/src/assets/overview_images/icons/icon-smoking.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-checked.png b/src/assets/overview_images/icons/icon-sound-checked.png
new file mode 100644
index 0000000..c6d4625
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-unchecked.png b/src/assets/overview_images/icons/icon-sound-unchecked.png
new file mode 100644
index 0000000..7dc8a9d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound.png b/src/assets/overview_images/icons/icon-sound.png
new file mode 100644
index 0000000..bc33109
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-checked.png b/src/assets/overview_images/icons/icon-temperature-checked.png
new file mode 100644
index 0000000..aea5ce7
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-unchecked.png b/src/assets/overview_images/icons/icon-temperature-unchecked.png
new file mode 100644
index 0000000..8c5755f
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature.png b/src/assets/overview_images/icons/icon-temperature.png
deleted file mode 100644
index 8c5755f..0000000
--- a/src/assets/overview_images/icons/icon-temperature.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/normal-1366.png b/src/assets/overview_images/normal-1366.png
new file mode 100644
index 0000000..31eecfc
--- /dev/null
+++ b/src/assets/overview_images/normal-1366.png
Binary files differ
diff --git a/src/assets/overview_images/offline-1366.png b/src/assets/overview_images/offline-1366.png
new file mode 100644
index 0000000..ef43859
--- /dev/null
+++ b/src/assets/overview_images/offline-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border-1366.png b/src/assets/overview_images/sub-tab-border-1366.png
new file mode 100644
index 0000000..21c13c1
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border.png b/src/assets/overview_images/sub-tab-border.png
new file mode 100644
index 0000000..008d28d
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider-1366.png b/src/assets/overview_images/sub-tab-guider-1366.png
new file mode 100644
index 0000000..8950768
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider.png b/src/assets/overview_images/sub-tab-guider.png
new file mode 100644
index 0000000..8080266
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg-1366.png b/src/assets/overview_images/tab-bottom-bg-1366.png
new file mode 100644
index 0000000..c1cf920
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg.png b/src/assets/overview_images/tab-bottom-bg.png
new file mode 100644
index 0000000..1c2c817
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked-1366.png b/src/assets/overview_images/tab-index-checked-1366.png
new file mode 100644
index 0000000..2171e1c
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked.png b/src/assets/overview_images/tab-index-checked.png
new file mode 100644
index 0000000..22f316b
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked-1366.png b/src/assets/overview_images/tab-index-unchecked-1366.png
new file mode 100644
index 0000000..59657f2
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked.png b/src/assets/overview_images/tab-index-unchecked.png
new file mode 100644
index 0000000..2a247c0
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg-1366.png b/src/assets/overview_images/tab-top-bg-1366.png
new file mode 100644
index 0000000..74fd852
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg.png b/src/assets/overview_images/tab-top-bg.png
new file mode 100644
index 0000000..068c663
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg.png
Binary files differ
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index abcd3ca..0d784b0 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const fenceSysRouters = [
{
path: '/fence',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/fence/video',
+ component: Layout,
+ redirect: '/fence/video/monitor',
+ name: 'FenceVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/fence/video'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/video/monitor',
+ name: 'FenceVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/assets/overview_images/alarm-1366.png b/src/assets/overview_images/alarm-1366.png
new file mode 100644
index 0000000..6c10353
--- /dev/null
+++ b/src/assets/overview_images/alarm-1366.png
Binary files differ
diff --git a/src/assets/overview_images/closed-1366.png b/src/assets/overview_images/closed-1366.png
new file mode 100644
index 0000000..7e46adf
--- /dev/null
+++ b/src/assets/overview_images/closed-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info-1366.png b/src/assets/overview_images/dev-info-1366.png
new file mode 100644
index 0000000..ca56e9b
--- /dev/null
+++ b/src/assets/overview_images/dev-info-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info.png b/src/assets/overview_images/dev-info.png
new file mode 100644
index 0000000..fd31e2b
--- /dev/null
+++ b/src/assets/overview_images/dev-info.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked-1366.png b/src/assets/overview_images/dev-type-border-checked-1366.png
new file mode 100644
index 0000000..2f01fce
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked.png b/src/assets/overview_images/dev-type-border-checked.png
new file mode 100644
index 0000000..045df39
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked-1366.png b/src/assets/overview_images/dev-type-border-unchecked-1366.png
new file mode 100644
index 0000000..e1deac0
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked.png b/src/assets/overview_images/dev-type-border-unchecked.png
new file mode 100644
index 0000000..b66c9fb
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-checked.png b/src/assets/overview_images/icons/icon-all-checked.png
new file mode 100644
index 0000000..9511644
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-unchecked.png b/src/assets/overview_images/icons/icon-all-unchecked.png
new file mode 100644
index 0000000..ac6ec4d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all.png b/src/assets/overview_images/icons/icon-all.png
deleted file mode 100644
index 9511644..0000000
--- a/src/assets/overview_images/icons/icon-all.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-checked.png b/src/assets/overview_images/icons/icon-camera-checked.png
new file mode 100644
index 0000000..5d2d150
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-point.png b/src/assets/overview_images/icons/icon-camera-point.png
new file mode 100644
index 0000000..b6700bf
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-point.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-unchecked.png b/src/assets/overview_images/icons/icon-camera-unchecked.png
new file mode 100644
index 0000000..8b6d384
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera.png b/src/assets/overview_images/icons/icon-camera.png
deleted file mode 100644
index 8b6d384..0000000
--- a/src/assets/overview_images/icons/icon-camera.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-checked.png b/src/assets/overview_images/icons/icon-fence-checked.png
new file mode 100644
index 0000000..f2074a9
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-unchecked.png b/src/assets/overview_images/icons/icon-fence-unchecked.png
new file mode 100644
index 0000000..1c8b34d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence.png b/src/assets/overview_images/icons/icon-fence.png
deleted file mode 100644
index 1c8b34d..0000000
--- a/src/assets/overview_images/icons/icon-fence.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-iris.png b/src/assets/overview_images/icons/icon-iris.png
deleted file mode 100644
index bc33109..0000000
--- a/src/assets/overview_images/icons/icon-iris.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-checked.png b/src/assets/overview_images/icons/icon-smoking-checked.png
new file mode 100644
index 0000000..2110112
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-unchecked.png b/src/assets/overview_images/icons/icon-smoking-unchecked.png
new file mode 100644
index 0000000..b671245
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking.png b/src/assets/overview_images/icons/icon-smoking.png
deleted file mode 100644
index b671245..0000000
--- a/src/assets/overview_images/icons/icon-smoking.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-checked.png b/src/assets/overview_images/icons/icon-sound-checked.png
new file mode 100644
index 0000000..c6d4625
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-unchecked.png b/src/assets/overview_images/icons/icon-sound-unchecked.png
new file mode 100644
index 0000000..7dc8a9d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound.png b/src/assets/overview_images/icons/icon-sound.png
new file mode 100644
index 0000000..bc33109
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-checked.png b/src/assets/overview_images/icons/icon-temperature-checked.png
new file mode 100644
index 0000000..aea5ce7
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-unchecked.png b/src/assets/overview_images/icons/icon-temperature-unchecked.png
new file mode 100644
index 0000000..8c5755f
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature.png b/src/assets/overview_images/icons/icon-temperature.png
deleted file mode 100644
index 8c5755f..0000000
--- a/src/assets/overview_images/icons/icon-temperature.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/normal-1366.png b/src/assets/overview_images/normal-1366.png
new file mode 100644
index 0000000..31eecfc
--- /dev/null
+++ b/src/assets/overview_images/normal-1366.png
Binary files differ
diff --git a/src/assets/overview_images/offline-1366.png b/src/assets/overview_images/offline-1366.png
new file mode 100644
index 0000000..ef43859
--- /dev/null
+++ b/src/assets/overview_images/offline-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border-1366.png b/src/assets/overview_images/sub-tab-border-1366.png
new file mode 100644
index 0000000..21c13c1
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border.png b/src/assets/overview_images/sub-tab-border.png
new file mode 100644
index 0000000..008d28d
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider-1366.png b/src/assets/overview_images/sub-tab-guider-1366.png
new file mode 100644
index 0000000..8950768
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider.png b/src/assets/overview_images/sub-tab-guider.png
new file mode 100644
index 0000000..8080266
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg-1366.png b/src/assets/overview_images/tab-bottom-bg-1366.png
new file mode 100644
index 0000000..c1cf920
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg.png b/src/assets/overview_images/tab-bottom-bg.png
new file mode 100644
index 0000000..1c2c817
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked-1366.png b/src/assets/overview_images/tab-index-checked-1366.png
new file mode 100644
index 0000000..2171e1c
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked.png b/src/assets/overview_images/tab-index-checked.png
new file mode 100644
index 0000000..22f316b
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked-1366.png b/src/assets/overview_images/tab-index-unchecked-1366.png
new file mode 100644
index 0000000..59657f2
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked.png b/src/assets/overview_images/tab-index-unchecked.png
new file mode 100644
index 0000000..2a247c0
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg-1366.png b/src/assets/overview_images/tab-top-bg-1366.png
new file mode 100644
index 0000000..74fd852
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg.png b/src/assets/overview_images/tab-top-bg.png
new file mode 100644
index 0000000..068c663
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg.png
Binary files differ
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index abcd3ca..0d784b0 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const fenceSysRouters = [
{
path: '/fence',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/fence/video',
+ component: Layout,
+ redirect: '/fence/video/monitor',
+ name: 'FenceVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/fence/video'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/video/monitor',
+ name: 'FenceVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
new file mode 100644
index 0000000..6a92ca8
--- /dev/null
+++ b/src/views/overview/fenceIndex.vue
@@ -0,0 +1,923 @@
+
+
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/overview_images/alarm-1366.png b/src/assets/overview_images/alarm-1366.png
new file mode 100644
index 0000000..6c10353
--- /dev/null
+++ b/src/assets/overview_images/alarm-1366.png
Binary files differ
diff --git a/src/assets/overview_images/closed-1366.png b/src/assets/overview_images/closed-1366.png
new file mode 100644
index 0000000..7e46adf
--- /dev/null
+++ b/src/assets/overview_images/closed-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info-1366.png b/src/assets/overview_images/dev-info-1366.png
new file mode 100644
index 0000000..ca56e9b
--- /dev/null
+++ b/src/assets/overview_images/dev-info-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info.png b/src/assets/overview_images/dev-info.png
new file mode 100644
index 0000000..fd31e2b
--- /dev/null
+++ b/src/assets/overview_images/dev-info.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked-1366.png b/src/assets/overview_images/dev-type-border-checked-1366.png
new file mode 100644
index 0000000..2f01fce
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked.png b/src/assets/overview_images/dev-type-border-checked.png
new file mode 100644
index 0000000..045df39
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked-1366.png b/src/assets/overview_images/dev-type-border-unchecked-1366.png
new file mode 100644
index 0000000..e1deac0
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked.png b/src/assets/overview_images/dev-type-border-unchecked.png
new file mode 100644
index 0000000..b66c9fb
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-checked.png b/src/assets/overview_images/icons/icon-all-checked.png
new file mode 100644
index 0000000..9511644
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-unchecked.png b/src/assets/overview_images/icons/icon-all-unchecked.png
new file mode 100644
index 0000000..ac6ec4d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all.png b/src/assets/overview_images/icons/icon-all.png
deleted file mode 100644
index 9511644..0000000
--- a/src/assets/overview_images/icons/icon-all.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-checked.png b/src/assets/overview_images/icons/icon-camera-checked.png
new file mode 100644
index 0000000..5d2d150
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-point.png b/src/assets/overview_images/icons/icon-camera-point.png
new file mode 100644
index 0000000..b6700bf
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-point.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-unchecked.png b/src/assets/overview_images/icons/icon-camera-unchecked.png
new file mode 100644
index 0000000..8b6d384
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera.png b/src/assets/overview_images/icons/icon-camera.png
deleted file mode 100644
index 8b6d384..0000000
--- a/src/assets/overview_images/icons/icon-camera.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-checked.png b/src/assets/overview_images/icons/icon-fence-checked.png
new file mode 100644
index 0000000..f2074a9
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-unchecked.png b/src/assets/overview_images/icons/icon-fence-unchecked.png
new file mode 100644
index 0000000..1c8b34d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence.png b/src/assets/overview_images/icons/icon-fence.png
deleted file mode 100644
index 1c8b34d..0000000
--- a/src/assets/overview_images/icons/icon-fence.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-iris.png b/src/assets/overview_images/icons/icon-iris.png
deleted file mode 100644
index bc33109..0000000
--- a/src/assets/overview_images/icons/icon-iris.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-checked.png b/src/assets/overview_images/icons/icon-smoking-checked.png
new file mode 100644
index 0000000..2110112
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-unchecked.png b/src/assets/overview_images/icons/icon-smoking-unchecked.png
new file mode 100644
index 0000000..b671245
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking.png b/src/assets/overview_images/icons/icon-smoking.png
deleted file mode 100644
index b671245..0000000
--- a/src/assets/overview_images/icons/icon-smoking.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-checked.png b/src/assets/overview_images/icons/icon-sound-checked.png
new file mode 100644
index 0000000..c6d4625
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-unchecked.png b/src/assets/overview_images/icons/icon-sound-unchecked.png
new file mode 100644
index 0000000..7dc8a9d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound.png b/src/assets/overview_images/icons/icon-sound.png
new file mode 100644
index 0000000..bc33109
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-checked.png b/src/assets/overview_images/icons/icon-temperature-checked.png
new file mode 100644
index 0000000..aea5ce7
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-unchecked.png b/src/assets/overview_images/icons/icon-temperature-unchecked.png
new file mode 100644
index 0000000..8c5755f
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature.png b/src/assets/overview_images/icons/icon-temperature.png
deleted file mode 100644
index 8c5755f..0000000
--- a/src/assets/overview_images/icons/icon-temperature.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/normal-1366.png b/src/assets/overview_images/normal-1366.png
new file mode 100644
index 0000000..31eecfc
--- /dev/null
+++ b/src/assets/overview_images/normal-1366.png
Binary files differ
diff --git a/src/assets/overview_images/offline-1366.png b/src/assets/overview_images/offline-1366.png
new file mode 100644
index 0000000..ef43859
--- /dev/null
+++ b/src/assets/overview_images/offline-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border-1366.png b/src/assets/overview_images/sub-tab-border-1366.png
new file mode 100644
index 0000000..21c13c1
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border.png b/src/assets/overview_images/sub-tab-border.png
new file mode 100644
index 0000000..008d28d
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider-1366.png b/src/assets/overview_images/sub-tab-guider-1366.png
new file mode 100644
index 0000000..8950768
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider.png b/src/assets/overview_images/sub-tab-guider.png
new file mode 100644
index 0000000..8080266
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg-1366.png b/src/assets/overview_images/tab-bottom-bg-1366.png
new file mode 100644
index 0000000..c1cf920
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg.png b/src/assets/overview_images/tab-bottom-bg.png
new file mode 100644
index 0000000..1c2c817
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked-1366.png b/src/assets/overview_images/tab-index-checked-1366.png
new file mode 100644
index 0000000..2171e1c
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked.png b/src/assets/overview_images/tab-index-checked.png
new file mode 100644
index 0000000..22f316b
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked-1366.png b/src/assets/overview_images/tab-index-unchecked-1366.png
new file mode 100644
index 0000000..59657f2
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked.png b/src/assets/overview_images/tab-index-unchecked.png
new file mode 100644
index 0000000..2a247c0
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg-1366.png b/src/assets/overview_images/tab-top-bg-1366.png
new file mode 100644
index 0000000..74fd852
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg.png b/src/assets/overview_images/tab-top-bg.png
new file mode 100644
index 0000000..068c663
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg.png
Binary files differ
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index abcd3ca..0d784b0 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const fenceSysRouters = [
{
path: '/fence',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/fence/video',
+ component: Layout,
+ redirect: '/fence/video/monitor',
+ name: 'FenceVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/fence/video'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/video/monitor',
+ name: 'FenceVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
+
+
+
+ {{ title }}
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
new file mode 100644
index 0000000..6a92ca8
--- /dev/null
+++ b/src/views/overview/fenceIndex.vue
@@ -0,0 +1,923 @@
+
+
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/overview_images/alarm-1366.png b/src/assets/overview_images/alarm-1366.png
new file mode 100644
index 0000000..6c10353
--- /dev/null
+++ b/src/assets/overview_images/alarm-1366.png
Binary files differ
diff --git a/src/assets/overview_images/closed-1366.png b/src/assets/overview_images/closed-1366.png
new file mode 100644
index 0000000..7e46adf
--- /dev/null
+++ b/src/assets/overview_images/closed-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info-1366.png b/src/assets/overview_images/dev-info-1366.png
new file mode 100644
index 0000000..ca56e9b
--- /dev/null
+++ b/src/assets/overview_images/dev-info-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info.png b/src/assets/overview_images/dev-info.png
new file mode 100644
index 0000000..fd31e2b
--- /dev/null
+++ b/src/assets/overview_images/dev-info.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked-1366.png b/src/assets/overview_images/dev-type-border-checked-1366.png
new file mode 100644
index 0000000..2f01fce
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked.png b/src/assets/overview_images/dev-type-border-checked.png
new file mode 100644
index 0000000..045df39
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked-1366.png b/src/assets/overview_images/dev-type-border-unchecked-1366.png
new file mode 100644
index 0000000..e1deac0
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked.png b/src/assets/overview_images/dev-type-border-unchecked.png
new file mode 100644
index 0000000..b66c9fb
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-checked.png b/src/assets/overview_images/icons/icon-all-checked.png
new file mode 100644
index 0000000..9511644
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-unchecked.png b/src/assets/overview_images/icons/icon-all-unchecked.png
new file mode 100644
index 0000000..ac6ec4d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all.png b/src/assets/overview_images/icons/icon-all.png
deleted file mode 100644
index 9511644..0000000
--- a/src/assets/overview_images/icons/icon-all.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-checked.png b/src/assets/overview_images/icons/icon-camera-checked.png
new file mode 100644
index 0000000..5d2d150
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-point.png b/src/assets/overview_images/icons/icon-camera-point.png
new file mode 100644
index 0000000..b6700bf
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-point.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-unchecked.png b/src/assets/overview_images/icons/icon-camera-unchecked.png
new file mode 100644
index 0000000..8b6d384
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera.png b/src/assets/overview_images/icons/icon-camera.png
deleted file mode 100644
index 8b6d384..0000000
--- a/src/assets/overview_images/icons/icon-camera.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-checked.png b/src/assets/overview_images/icons/icon-fence-checked.png
new file mode 100644
index 0000000..f2074a9
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-unchecked.png b/src/assets/overview_images/icons/icon-fence-unchecked.png
new file mode 100644
index 0000000..1c8b34d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence.png b/src/assets/overview_images/icons/icon-fence.png
deleted file mode 100644
index 1c8b34d..0000000
--- a/src/assets/overview_images/icons/icon-fence.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-iris.png b/src/assets/overview_images/icons/icon-iris.png
deleted file mode 100644
index bc33109..0000000
--- a/src/assets/overview_images/icons/icon-iris.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-checked.png b/src/assets/overview_images/icons/icon-smoking-checked.png
new file mode 100644
index 0000000..2110112
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-unchecked.png b/src/assets/overview_images/icons/icon-smoking-unchecked.png
new file mode 100644
index 0000000..b671245
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking.png b/src/assets/overview_images/icons/icon-smoking.png
deleted file mode 100644
index b671245..0000000
--- a/src/assets/overview_images/icons/icon-smoking.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-checked.png b/src/assets/overview_images/icons/icon-sound-checked.png
new file mode 100644
index 0000000..c6d4625
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-unchecked.png b/src/assets/overview_images/icons/icon-sound-unchecked.png
new file mode 100644
index 0000000..7dc8a9d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound.png b/src/assets/overview_images/icons/icon-sound.png
new file mode 100644
index 0000000..bc33109
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-checked.png b/src/assets/overview_images/icons/icon-temperature-checked.png
new file mode 100644
index 0000000..aea5ce7
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-unchecked.png b/src/assets/overview_images/icons/icon-temperature-unchecked.png
new file mode 100644
index 0000000..8c5755f
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature.png b/src/assets/overview_images/icons/icon-temperature.png
deleted file mode 100644
index 8c5755f..0000000
--- a/src/assets/overview_images/icons/icon-temperature.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/normal-1366.png b/src/assets/overview_images/normal-1366.png
new file mode 100644
index 0000000..31eecfc
--- /dev/null
+++ b/src/assets/overview_images/normal-1366.png
Binary files differ
diff --git a/src/assets/overview_images/offline-1366.png b/src/assets/overview_images/offline-1366.png
new file mode 100644
index 0000000..ef43859
--- /dev/null
+++ b/src/assets/overview_images/offline-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border-1366.png b/src/assets/overview_images/sub-tab-border-1366.png
new file mode 100644
index 0000000..21c13c1
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border.png b/src/assets/overview_images/sub-tab-border.png
new file mode 100644
index 0000000..008d28d
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider-1366.png b/src/assets/overview_images/sub-tab-guider-1366.png
new file mode 100644
index 0000000..8950768
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider.png b/src/assets/overview_images/sub-tab-guider.png
new file mode 100644
index 0000000..8080266
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg-1366.png b/src/assets/overview_images/tab-bottom-bg-1366.png
new file mode 100644
index 0000000..c1cf920
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg.png b/src/assets/overview_images/tab-bottom-bg.png
new file mode 100644
index 0000000..1c2c817
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked-1366.png b/src/assets/overview_images/tab-index-checked-1366.png
new file mode 100644
index 0000000..2171e1c
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked.png b/src/assets/overview_images/tab-index-checked.png
new file mode 100644
index 0000000..22f316b
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked-1366.png b/src/assets/overview_images/tab-index-unchecked-1366.png
new file mode 100644
index 0000000..59657f2
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked.png b/src/assets/overview_images/tab-index-unchecked.png
new file mode 100644
index 0000000..2a247c0
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg-1366.png b/src/assets/overview_images/tab-top-bg-1366.png
new file mode 100644
index 0000000..74fd852
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg.png b/src/assets/overview_images/tab-top-bg.png
new file mode 100644
index 0000000..068c663
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg.png
Binary files differ
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index abcd3ca..0d784b0 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const fenceSysRouters = [
{
path: '/fence',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/fence/video',
+ component: Layout,
+ redirect: '/fence/video/monitor',
+ name: 'FenceVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/fence/video'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/video/monitor',
+ name: 'FenceVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
new file mode 100644
index 0000000..6a92ca8
--- /dev/null
+++ b/src/views/overview/fenceIndex.vue
@@ -0,0 +1,923 @@
+
+
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
new file mode 100644
index 0000000..cdc6c5c
--- /dev/null
+++ b/src/views/overview/regionIndex.vue
@@ -0,0 +1,923 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/overview_images/alarm-1366.png b/src/assets/overview_images/alarm-1366.png
new file mode 100644
index 0000000..6c10353
--- /dev/null
+++ b/src/assets/overview_images/alarm-1366.png
Binary files differ
diff --git a/src/assets/overview_images/closed-1366.png b/src/assets/overview_images/closed-1366.png
new file mode 100644
index 0000000..7e46adf
--- /dev/null
+++ b/src/assets/overview_images/closed-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info-1366.png b/src/assets/overview_images/dev-info-1366.png
new file mode 100644
index 0000000..ca56e9b
--- /dev/null
+++ b/src/assets/overview_images/dev-info-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-info.png b/src/assets/overview_images/dev-info.png
new file mode 100644
index 0000000..fd31e2b
--- /dev/null
+++ b/src/assets/overview_images/dev-info.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked-1366.png b/src/assets/overview_images/dev-type-border-checked-1366.png
new file mode 100644
index 0000000..2f01fce
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-checked.png b/src/assets/overview_images/dev-type-border-checked.png
new file mode 100644
index 0000000..045df39
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-checked.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked-1366.png b/src/assets/overview_images/dev-type-border-unchecked-1366.png
new file mode 100644
index 0000000..e1deac0
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/dev-type-border-unchecked.png b/src/assets/overview_images/dev-type-border-unchecked.png
new file mode 100644
index 0000000..b66c9fb
--- /dev/null
+++ b/src/assets/overview_images/dev-type-border-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-checked.png b/src/assets/overview_images/icons/icon-all-checked.png
new file mode 100644
index 0000000..9511644
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all-unchecked.png b/src/assets/overview_images/icons/icon-all-unchecked.png
new file mode 100644
index 0000000..ac6ec4d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-all-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-all.png b/src/assets/overview_images/icons/icon-all.png
deleted file mode 100644
index 9511644..0000000
--- a/src/assets/overview_images/icons/icon-all.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-checked.png b/src/assets/overview_images/icons/icon-camera-checked.png
new file mode 100644
index 0000000..5d2d150
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-point.png b/src/assets/overview_images/icons/icon-camera-point.png
new file mode 100644
index 0000000..b6700bf
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-point.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera-unchecked.png b/src/assets/overview_images/icons/icon-camera-unchecked.png
new file mode 100644
index 0000000..8b6d384
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-camera-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-camera.png b/src/assets/overview_images/icons/icon-camera.png
deleted file mode 100644
index 8b6d384..0000000
--- a/src/assets/overview_images/icons/icon-camera.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-checked.png b/src/assets/overview_images/icons/icon-fence-checked.png
new file mode 100644
index 0000000..f2074a9
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence-unchecked.png b/src/assets/overview_images/icons/icon-fence-unchecked.png
new file mode 100644
index 0000000..1c8b34d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-fence-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-fence.png b/src/assets/overview_images/icons/icon-fence.png
deleted file mode 100644
index 1c8b34d..0000000
--- a/src/assets/overview_images/icons/icon-fence.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-iris.png b/src/assets/overview_images/icons/icon-iris.png
deleted file mode 100644
index bc33109..0000000
--- a/src/assets/overview_images/icons/icon-iris.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-checked.png b/src/assets/overview_images/icons/icon-smoking-checked.png
new file mode 100644
index 0000000..2110112
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking-unchecked.png b/src/assets/overview_images/icons/icon-smoking-unchecked.png
new file mode 100644
index 0000000..b671245
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-smoking-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-smoking.png b/src/assets/overview_images/icons/icon-smoking.png
deleted file mode 100644
index b671245..0000000
--- a/src/assets/overview_images/icons/icon-smoking.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-checked.png b/src/assets/overview_images/icons/icon-sound-checked.png
new file mode 100644
index 0000000..c6d4625
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound-unchecked.png b/src/assets/overview_images/icons/icon-sound-unchecked.png
new file mode 100644
index 0000000..7dc8a9d
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-sound.png b/src/assets/overview_images/icons/icon-sound.png
new file mode 100644
index 0000000..bc33109
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-sound.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-checked.png b/src/assets/overview_images/icons/icon-temperature-checked.png
new file mode 100644
index 0000000..aea5ce7
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-checked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature-unchecked.png b/src/assets/overview_images/icons/icon-temperature-unchecked.png
new file mode 100644
index 0000000..8c5755f
--- /dev/null
+++ b/src/assets/overview_images/icons/icon-temperature-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/icons/icon-temperature.png b/src/assets/overview_images/icons/icon-temperature.png
deleted file mode 100644
index 8c5755f..0000000
--- a/src/assets/overview_images/icons/icon-temperature.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/overview_images/normal-1366.png b/src/assets/overview_images/normal-1366.png
new file mode 100644
index 0000000..31eecfc
--- /dev/null
+++ b/src/assets/overview_images/normal-1366.png
Binary files differ
diff --git a/src/assets/overview_images/offline-1366.png b/src/assets/overview_images/offline-1366.png
new file mode 100644
index 0000000..ef43859
--- /dev/null
+++ b/src/assets/overview_images/offline-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border-1366.png b/src/assets/overview_images/sub-tab-border-1366.png
new file mode 100644
index 0000000..21c13c1
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-border.png b/src/assets/overview_images/sub-tab-border.png
new file mode 100644
index 0000000..008d28d
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-border.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider-1366.png b/src/assets/overview_images/sub-tab-guider-1366.png
new file mode 100644
index 0000000..8950768
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider-1366.png
Binary files differ
diff --git a/src/assets/overview_images/sub-tab-guider.png b/src/assets/overview_images/sub-tab-guider.png
new file mode 100644
index 0000000..8080266
--- /dev/null
+++ b/src/assets/overview_images/sub-tab-guider.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg-1366.png b/src/assets/overview_images/tab-bottom-bg-1366.png
new file mode 100644
index 0000000..c1cf920
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-bottom-bg.png b/src/assets/overview_images/tab-bottom-bg.png
new file mode 100644
index 0000000..1c2c817
--- /dev/null
+++ b/src/assets/overview_images/tab-bottom-bg.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked-1366.png b/src/assets/overview_images/tab-index-checked-1366.png
new file mode 100644
index 0000000..2171e1c
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-checked.png b/src/assets/overview_images/tab-index-checked.png
new file mode 100644
index 0000000..22f316b
--- /dev/null
+++ b/src/assets/overview_images/tab-index-checked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked-1366.png b/src/assets/overview_images/tab-index-unchecked-1366.png
new file mode 100644
index 0000000..59657f2
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-index-unchecked.png b/src/assets/overview_images/tab-index-unchecked.png
new file mode 100644
index 0000000..2a247c0
--- /dev/null
+++ b/src/assets/overview_images/tab-index-unchecked.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg-1366.png b/src/assets/overview_images/tab-top-bg-1366.png
new file mode 100644
index 0000000..74fd852
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg-1366.png
Binary files differ
diff --git a/src/assets/overview_images/tab-top-bg.png b/src/assets/overview_images/tab-top-bg.png
new file mode 100644
index 0000000..068c663
--- /dev/null
+++ b/src/assets/overview_images/tab-top-bg.png
Binary files differ
diff --git a/src/router/modules/fenceSys.js b/src/router/modules/fenceSys.js
index abcd3ca..0d784b0 100644
--- a/src/router/modules/fenceSys.js
+++ b/src/router/modules/fenceSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const fenceSysRouters = [
{
path: '/fence',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/fence/video',
+ component: Layout,
+ redirect: '/fence/video/monitor',
+ name: 'FenceVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/fence/video'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/video/monitor',
+ name: 'FenceVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
new file mode 100644
index 0000000..6a92ca8
--- /dev/null
+++ b/src/views/overview/fenceIndex.vue
@@ -0,0 +1,923 @@
+
+ import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
new file mode 100644
index 0000000..cdc6c5c
--- /dev/null
+++ b/src/views/overview/regionIndex.vue
@@ -0,0 +1,923 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 574d6c5..f68473e 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -210,8 +210,8 @@
this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
new file mode 100644
index 0000000..6a92ca8
--- /dev/null
+++ b/src/views/overview/fenceIndex.vue
@@ -0,0 +1,923 @@
+
+ {
const list = response.data.list
- for(var i=0;i import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
new file mode 100644
index 0000000..cdc6c5c
--- /dev/null
+++ b/src/views/overview/regionIndex.vue
@@ -0,0 +1,923 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 574d6c5..f68473e 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -210,8 +210,8 @@
this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
new file mode 100644
index 0000000..6a92ca8
--- /dev/null
+++ b/src/views/overview/fenceIndex.vue
@@ -0,0 +1,923 @@
+
+ {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/fence/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/fence/video/history',
+ name: 'FenceVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/fence/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/fence/overview',
+ component: OverviewLayout,
+ redirect: '/fence/overview/device',
+ name: 'FenceOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/fence/overview'], // 权限名称
+ sys: '/fence'
+ },
+ children: [
+ {
+ path: '/fence/overview/device',
+ name: 'FenceOverviewDevice',
+ component: () => import('@/views/overview/fenceIndex'),
+ meta: { title: '周界总览', icon: '', permission: ['/fence/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/fence/alarm',
component: Layout,
redirect: '/fence/alarm',
diff --git a/src/router/modules/keySys.js b/src/router/modules/keySys.js
index a8c93fa..f3a027b 100644
--- a/src/router/modules/keySys.js
+++ b/src/router/modules/keySys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const keySysRouters = [
{
path: '/key',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/key/video',
+ component: Layout,
+ redirect: '/key/video/monitor',
+ name: 'KeyVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/key/video'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/video/monitor',
+ name: 'KeyVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/key/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/key/video/history',
+ name: 'KeyVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/key/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/key/overview',
+ component: OverviewLayout,
+ redirect: '/key/overview/device',
+ name: 'KeyOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/key/overview'], // 权限名称
+ sys: '/key'
+ },
+ children: [
+ {
+ path: '/key/overview/device',
+ name: 'KeyOverviewDevice',
+ component: () => import('@/views/overview/keyIndex'),
+ meta: { title: '重点区域总览', icon: '', permission: ['/key/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/key/alarm',
component: Layout,
redirect: '/key/alarm/now',
diff --git a/src/router/modules/regionSys.js b/src/router/modules/regionSys.js
index 8b69cf0..9b4613a 100644
--- a/src/router/modules/regionSys.js
+++ b/src/router/modules/regionSys.js
@@ -1,5 +1,6 @@
/* Layout */
import Layout from '../../views/layout/Layout'
+import OverviewLayout from '../../views/layout/OverviewLayout'
export const regionSysRouters = [
{
path: '/region',
@@ -13,6 +14,54 @@
}
},
{
+ path: '/region/video',
+ component: Layout,
+ redirect: '/region/video/monitor',
+ name: 'RegionVideo',
+ alwaysShow: true,
+ meta: {
+ title: '视频管理',
+ icon: 'icon-video', // 图标
+ permission: ['/region/video'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/video/monitor',
+ name: 'RegionVideoMonitor',
+ component: () => import('@/views/video/monitor'),
+ meta: { title: '实时视频', icon: '', permission: ['/region/video/monitor'], keepAlive: true }
+ },
+ {
+ path: '/region/video/history',
+ name: 'RegionVideoHistory',
+ component: () => import('@/views/video/history'),
+ meta: { title: '历史视频', icon: '', permission: ['/region/video/history'], keepAlive: true }
+ }
+ ]
+ },
+ {
+ path: '/region/overview',
+ component: OverviewLayout,
+ redirect: '/region/overview/device',
+ name: 'RegionOverview',
+ alwaysShow: true,
+ meta: {
+ title: '运行总览',
+ icon: '', // 图标
+ permission: ['/region/overview'], // 权限名称
+ sys: '/region'
+ },
+ children: [
+ {
+ path: '/region/overview/device',
+ name: 'RegionOverviewDevice',
+ component: () => import('@/views/overview/regionIndex'),
+ meta: { title: '全域总览', icon: '', permission: ['/region/overview/device'], keepAlive: true }
+ }
+ ]
+ },
+ {
path: '/region/alarm',
component: Layout,
redirect: '/region/alarm',
diff --git a/src/views/car/carAdd.vue b/src/views/car/carAdd.vue
index de07fd1..6a35b7d 100644
--- a/src/views/car/carAdd.vue
+++ b/src/views/car/carAdd.vue
@@ -9,9 +9,9 @@
-
- {{item.name}}
-
+
+ {{ item.name }}
+
@@ -26,7 +26,7 @@
-
+
@@ -125,7 +125,6 @@
this.$refs['dataForm'].clearValidate()
})
} else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
-
this.isDetailMode = false
this.isEditMode = true
@@ -173,8 +172,8 @@
fetchStaffList() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
@@ -53,7 +53,12 @@
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
new file mode 100644
index 0000000..cdc6c5c
--- /dev/null
+++ b/src/views/overview/regionIndex.vue
@@ -0,0 +1,923 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 574d6c5..f68473e 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -210,8 +210,8 @@
this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
-
+
{{ title }}
-
-
-
+
+
+
+
全部
-
-
- 球机
+
+
+
+ 摄像头
-
-
- 枪机
+
+
+
+ 电子围栏
-
-
- 人脸识别
+
+
+
+ 温湿度
-
-
- 车牌识别
+
+
+
+ 烟感
-
-
- 周界
+
+
+
+ 声光报警
报警列表
+ 报警列表
+
+
+
+
+
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 球机
+
+
+ 摄像头
- 枪机
+
+
+ 电子围栏
- 人脸识别
+
+
+ 温湿度
- 车牌识别
+
+
+ 烟感
- 周界
+
+
+ 声光报警
- 园区平面图
- 3#一层
- 4#一层
- 4#五层
+
+
+
+
+
+
+
+
+
- 三号楼一层
+ 四号楼一层
+ 四号楼五层
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 是否开启
+ {{ dataForm.deviceStatusName }}
-
- 是否开启
- {{ dataForm.deviceStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
@@ -195,6 +200,12 @@
import tg_3_1 from '../../assets/overview_images/tg/mapOverviewTg-3-1.jpg'
import tg_4_1 from '../../assets/overview_images/tg/mapOverviewTg-4-1.jpg'
import tg_4_5 from '../../assets/overview_images/tg/mapOverviewTg-4-5.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
+const fenceTypes = [6, 7]
+const smokingTypes = [2]
+const temperatureTypes = [1]
+const soundTypes = [12]
export default {
name: 'CtrlOverview',
components: { DeviceDetail },
@@ -203,7 +214,8 @@
title: getProject().title,
bgImageSrc: tg_main,
devListParams: {
- picture: '1'
+ picture: '1',
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -218,17 +230,22 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- round: true,
- gun: true,
- face: true,
- car: true,
- perimeter: true,
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showFence: true, // 是否显示电子围栏按钮
+ showTemp: false, // 是否显示温湿度按钮
+ showSmoking: false, // 是否显示烟感按钮
+ showSound: false, // 是否显示声光报警按钮
+ showSubTabGuider: false, // 是否显示二级菜单指引
+ showFloorThree: false, // 是否显示三层
+ showFloorFour: false, // 是否显示四层
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -244,11 +261,11 @@
text: '报警时间',
value: 'alarmTime',
align: 'center',
- width: 120
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -260,43 +277,51 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isFence: false,
- isDoor: false
+ }, // 设备详情表单
+ isFence: false, // 是否电子围栏设备
+ checkDevType: [true, false, false, false, false, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -304,16 +329,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus().then(response => {
if (response.code === 200) {
@@ -324,13 +370,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -348,68 +388,199 @@
backToIndex() {
this.$router.push('/ctrl')
},
- selectDevByType(type) {
- switch (type) {
- case 'round':
- this.round = !this.round
- break
- case 'gun':
- this.gun = !this.gun
- break
- case 'face':
- this.face = !this.face
- break
- case 'car':
- this.car = !this.car
- break
- case 'perimeter':
- this.perimeter = !this.perimeter
- break
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false, false, false, false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ } else if (type === 'fence') {
+ this.devListParams.deviceTypes = fenceTypes.toString()
+ this.checkDevType[2] = true
+ } else if (type === 'temperature') {
+ this.devListParams.deviceTypes = temperatureTypes.toString()
+ this.checkDevType[3] = true
+ } else if (type === 'smoking') {
+ this.devListParams.deviceTypes = smokingTypes.toString()
+ this.checkDevType[4] = true
+ } else if (type === 'sound') {
+ this.devListParams.deviceTypes = soundTypes.toString()
+ this.checkDevType[5] = true
+ }
+ this.fetchDeviceData()
+ },
+ // 点击平面图一级按钮
+ selectMapTab(tab, event) {
+ // 遍历所有的地图
+ const mapTabs = document.querySelectorAll('.map-index-button')
+ for (let i = 0; i < mapTabs.length; i++) {
+ if (mapTabs[i].className.indexOf('index-selected') > -1) {
+ mapTabs[i].className = 'map-index-button'
+ }
+ }
+
+ // 添加选中的样式
+ event.currentTarget.className += ' index-selected'
+
+ // 选中三层
+ if (tab === 'three') {
+ this.showSubTabGuider = true
+ this.showFloorThree = true
+ this.showFloorFour = false
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-3'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '135px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '185px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '340px'
+ this.$refs['sub-tab-floor-3'].style.top = '220px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '102px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '140px'
+
+ this.$refs['sub-tab-floor-3'].style.right = '245px'
+ this.$refs['sub-tab-floor-3'].style.top = '170px'
+ }
+ } else if (tab === 'four') {
+ this.showSubTabGuider = true
+ this.showFloorThree = false
+ this.showFloorFour = true
+
+ this.$refs['sub-tab'].style.position = 'absolute'
+ this.$refs['sub-tab-border'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
+ this.$refs['sub-tab-floor-4-5'].style.position = 'absolute'
+
+ if (this.winSize.width >= 1920) {
+ this.$refs['sub-tab'].style.right = '290px'
+ this.$refs['sub-tab'].style.top = '210px'
+
+ this.$refs['sub-tab-border'].style.right = '335px'
+ this.$refs['sub-tab-border'].style.top = '260px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '300px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '340px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.$refs['sub-tab'].style.right = '215px'
+ this.$refs['sub-tab'].style.top = '158px'
+
+ this.$refs['sub-tab-border'].style.right = '245px'
+ this.$refs['sub-tab-border'].style.top = '196px'
+
+ this.$refs['sub-tab-floor-4-1'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-1'].style.top = '226px'
+
+ this.$refs['sub-tab-floor-4-5'].style.right = '245px'
+ this.$refs['sub-tab-floor-4-5'].style.top = '266px'
+ }
+ } else {
+ this.changeMap('tg_main')
}
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
- // switch (type) {
- // case 'round':
- // classObj['point-flicker-r'] = true
- // return classObj
- //
- // case 'gun':
- // classObj['point-flicker-g'] = true
- // return classObj
- //
- // case 'face':
- // classObj['point-flicker-f'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'car':
- // classObj['point-flicker-c'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- //
- // case 'perimeter':
- // classObj['point-flicker-p'] = true
- // classObj['point-cam-' + key + '-loc'] = true
- // return classObj
- // }
- },
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- if (index === 'tg_3_1') {
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+
+ if (index === 'tg_main') {
+ this.bgImageSrc = tg_main
+ this.devListParams.picture = '1'
+
+ this.showFence = true // 显示电子围栏
+ this.showTemp = false // 隐藏温湿度设备
+ this.showSound = false // 隐藏声光报警设备
+ this.showSmoking = false // 隐藏烟感设备
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 3 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 3 * 155) / 2
+ }
+
+ // 将二级菜单的指引区隐藏
+ this.showSubTabGuider = false
+ this.showFloorThree = false
+ this.showFloorFour = false
+ } else if (index === 'tg_3_1') {
this.bgImageSrc = tg_3_1
+ this.devListParams.picture = '2'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
} else if (index === 'tg_4_1') {
this.bgImageSrc = tg_4_1
+ this.devListParams.picture = '3'
this.imgSizeOriginal = { width: 2218, height: 2169 }
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = true // 显示温湿度
+ this.showSmoking = true // 显示烟感
+ this.showSound = true // 显示声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 5 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 5 * 155) / 2
+ }
} else if (index === 'tg_4_5') {
this.bgImageSrc = tg_4_5
+ this.devListParams.picture = '4'
+
+ this.showFence = false // 隐藏电子围栏
+ this.showTemp = false // 隐藏温湿度
+ this.showSmoking = false // 隐藏烟感
+ this.showSound = false // 隐藏声光报警器
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
}
+
+ this.selectDevByType('all')
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -429,18 +600,39 @@
if (dev.typeName.indexOf('电子围栏') >= 0) {
this.isFence = true
}
-
- // 营门设备有进出营门的标志位
- if (dev.areaId === '1') {
- this.isDoor = true
- }
} else {
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -460,7 +652,7 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 21px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
@@ -477,14 +669,14 @@
height: 26px;
position: fixed;
left: 20px;
- top: 12px;
+ top: 20px;
}
.exit-icon {
width: 26px;
height: 26px;
position: fixed;
right: 20px;
- top: 12px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
width: 26px;
@@ -499,11 +691,29 @@
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -551,12 +761,16 @@
z-index: 500;
top: 300px;
left: 20px;
- width: 400px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
padding-left: 10px;
color: #00fff6;
font-size: 24px;
+ .icon-right {
+ cursor: pointer;
+ margin-left: 20px;
+ }
}
.el-scrollbar {
/*height: 200px;*/
@@ -573,18 +787,6 @@
.el-table {
font-size: 12px;
}
- /*.el-table th {*/
- /* background-color: #0757A0;*/
- /* padding: 7px 0px;*/
- /*}*/
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -601,7 +803,7 @@
.alarm-now-block /deep/ .el-table th {
background-color: #0757A0;
- padding: 7px 0px;
+ padding: 12px 0px;
font-size: 16px;
color: #00fff6;
font-weight: normal;
@@ -609,103 +811,173 @@
.alarm-now-block /deep/ .el-table td {
/*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
+ padding: 10px 0px;
+ font-size: 15px;
color: #FFFFFF;
font-weight: normal;
}
.alarm-now-block /deep/ .el-table__row td {
- /*background-color: #0757A0;*/
- padding: 5px 0px;
- font-size: 14px;
- color: #FFFFFF;
- font-weight: normal;
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
}
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- @media(max-width: 1440px) {
- .main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
+ }
+ .dev-type-selected span {
+ color: #f58a88 !important;
}
- @media(max-width: 1366px) {
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
+
+ @media(max-width: 1440px) {
.main-title {
height: 65px;
padding-top: 16px;
@@ -736,451 +1008,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
- }
-
-
-
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 4487602..63c9aac 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -3,12 +3,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/views/overview/doorIndex.vue b/src/views/overview/doorIndex.vue
index ea153f4..03624bb 100644
--- a/src/views/overview/doorIndex.vue
+++ b/src/views/overview/doorIndex.vue
@@ -2,7 +2,6 @@
@@ -20,7 +19,7 @@
-
{{ title }}
-
+
@@ -69,6 +68,7 @@
:data="alarmList"
class="alarm-list-table"
border
+ stripe
@row-click="alarmRowClick">
@@ -82,81 +82,66 @@
-
-
+
+
+
+
全部
-
-
- 人脸识别
-
-
-
- 车牌识别
+
+
+
+
+ 摄像头
-
@@ -166,8 +151,10 @@
import { alarmListOverview } from '@/api/alarm'
import DeviceDetail from '@/views/deviceManage/deviceDetail'
import tg_main from '../../assets/overview_images/tg/mapOverviewTg.jpg'
+
+const cameraTypes = [4, 5, 8, 9, 10, 11]
export default {
- name: 'DoorOverviewDevice',
+ name: 'DoorOverview',
components: { DeviceDetail },
data() {
return {
@@ -175,7 +162,8 @@
bgImageSrc: tg_main,
devListParams: {
picture: '1',
- areaTypeId: 1
+ areaTypeId: 1,
+ deviceTypes: []
},
dev: {
alarm: 0,
@@ -190,12 +178,15 @@
imgSize: {
width: 2245,
height: 1586
- },
+ }, // 图片显示尺寸
winSize: {
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- alarmList: [],
+ halfLeft: 0,
+ footLeft: 0, // footer部分设备类型按钮偏移量
+ showDevDetail: false, // 是否显示设备详情
+ alarmList: [], // 报警列表
alarmColumns: [
{
text: '设备编号',
@@ -210,11 +201,12 @@
{
text: '报警时间',
value: 'alarmTime',
- align: 'center'
+ align: 'center',
+ width: 165
}
- ], // 显示列
+ ], // 报警列表显示列
tableShow: true, // 是否显示告警列表
- devList: [],
+ devList: [], // 设备列表（在地图上显示）
dataForm: {
id: '', // id
name: '', // 设备名
@@ -226,42 +218,49 @@
position: '', // 安装位置
installDate: '', // 安装日期
inOutName: '' // 进出营
- }, // 表单
- isDoor: true
+ }, // 设备详情表单
+ checkDevType: [true, false] // 选中设备类型
}
},
- activated() {
- this.fetchData()
- this.fetchDeviceData()
- this.fetchAlarmNowData()
- },
mounted() {
- // this.getBgImageSize()
- // this.reDrawDevs()
+ this.initWindowSize()
+
+ this.fetchData()
+ this.fetchAlarmNowData()
const that = this
window.onresize = function() {
+ that.initWindowSize()
that.getBgImageSize()
}
},
methods: {
- getBgImageSize() {
- // 获取图片尺寸
- this.imgSize = {
- width: this.$refs['bgImg'].width,
- height: this.$refs['bgImg'].height
- }
+ // 获取窗口大小
+ initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
- this.reDrawDevs()
+ // 设置footer部分居中显示
+ if (this.winSize.width >= 1920) {
+ this.footLeft = (this.winSize.width - 2 * 210) / 2
+ } else if (this.winSize.width >= 1366 && this.winSize.width < 1920) {
+ this.footLeft = (this.winSize.width - 2 * 155) / 2
+ }
},
+ // 获取图像大小
+ getBgImageSize() {
+ // 获取图片尺寸
+ this.imgSize = {
+ width: this.$refs['bgImg'].width,
+ height: this.$refs['bgImg'].height
+ }
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
+ },
+ // 重新绘制设备点位
reDrawDevs() {
- // this.getBgImageSize()
-
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
// 调整球机的设备位置
@@ -269,16 +268,37 @@
this.devList.forEach(function(item) {
const point = document.getElementById(item.id)
- if (item.x !== '' && item.y !== '') {
- point.style.position = 'absolute'
- point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
- point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
- } else {
- point.style.display = 'none'
+ if (point !== null) {
+ if (item.x !== '' && item.y !== '') {
+ point.style.position = 'absolute'
+ point.style.top = item.y * that.imgSize.height / that.imgSizeOriginal.height + 'px'
+ point.style.left = (item.x * that.imgSize.width / that.imgSizeOriginal.width + halfLeft) + 'px'
+ } else {
+ point.style.display = 'none'
+ }
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ fetchDeviceData() {
+ overviewDeviceList(this.devListParams).then(response => {
+ if (response.code === 200) {
+ const that = this
+ this.devList = []
+ response.data.forEach(dev => {
+ if (dev.x !== '' && dev.y !== '') {
+ that.devList.push(dev)
+ }
+ })
+ }
+ })
+ },
+ // 平面图就绪时执行函数
+ backgroundImageReady() {
+ this.getBgImageSize()
+ this.fetchDeviceData()
+ },
+ // 获取设备状态统计值
fetchData() {
overviewDeviceStatus({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -289,13 +309,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview({ areaTypeId: this.devListParams.areaTypeId }).then(response => {
if (response.code === 200) {
@@ -313,12 +327,36 @@
backToIndex() {
this.$router.push('/door/alarm/now')
},
- setClass(key) {
- const classObj = {}
- classObj['point'] = true
- return classObj
+ // 选择设备类型
+ selectDevByType(type, event) {
+ // 遍历所有的设备类型
+ const devTypes = document.querySelectorAll('.dev-icon')
+ for (let i = 0; i < devTypes.length; i++) {
+ if (devTypes[i].className.indexOf('dev-type-selected') > -1) {
+ devTypes[i].className = 'dev-icon el-col el-col-24'
+ }
+ }
+ this.checkDevType = [false, false]
+
+ // 添加选中的样式
+ if (typeof event === 'undefined') {
+ devTypes[0].className += ' dev-type-selected'
+ } else {
+ event.currentTarget.className += ' dev-type-selected'
+ }
+
+ if (type === 'all') {
+ this.devListParams.deviceTypes = []
+ this.checkDevType[0] = true
+ } else if (type === 'camera') {
+ this.devListParams.deviceTypes = cameraTypes.toString()
+ this.checkDevType[1] = true
+ }
+ this.fetchDeviceData()
},
- detailDev(dev) {
+ // 查询并显示设备详情
+ detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -337,9 +375,35 @@
this.$message.error(response.message)
}
})
+
+ // 弹窗显示设备详情
+ const targetDev = event.currentTarget // 取到点击到的设备图标div
+
+ this.showDevDetail = true
+ let top = parseInt(targetDev.style.top.substring(0, targetDev.style.top.length - 2))
+ top = top + 100
+ this.$refs['dev-detail-block'].style.position = 'absolute'
+ this.$refs['dev-detail-block'].style.top = top + 'px'
+ this.$refs['dev-detail-block'].style.left = targetDev.style.left
},
+ // 点击报警列表
alarmRowClick(dev, column, event) {
+ },
+ // 清除设备详情
+ resetDevDetail() {
+ this.dataForm = {
+ id: '', // id
+ name: '', // 设备名
+ devcode: '', // 设备编号
+ typeName: '', // 设备类型
+ model: '', // 设备型号
+ onlineStatusName: '', // 在线状态
+ deviceStatusName: '', // 设备状态
+ position: '', // 安装位置
+ installDate: '', // 安装日期
+ inOutName: '' // 进出营
+ }
}
}
}
@@ -359,50 +423,68 @@
.main-title {
height: 90px;
text-align: center;
- padding-top: 28px;
+ padding-top: 20px;
background: url("../../assets/overview_images/title-background-1920.png");
}
.main-title img {
display: inline-block;
margin-right: 15px;
- width: 40px;
- height: 40px;
+ width: 52px;
+ height: 32px;
vertical-align: text-bottom;
}
.home-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- left: 32px;
- top: 24px;
+ left: 20px;
+ top: 20px;
}
.exit-icon {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
position: fixed;
- right: 32px;
- top: 24px;
+ right: 20px;
+ top: 20px;
}
.home-icon img, .exit-icon img {
- width: 28px;
- height: 28px;
+ width: 26px;
+ height: 26px;
}
.main-title span {
color: #FFFFFF;
font-size: 32px;
- /*font-weight: bold;*/
+ font-weight: bold;
font-family: 'Microsoft YaHei';
}
.map-overview {
- margin-top: 30px;
- height: calc(90vh - 140px);
+ margin-top: 50px;
+ /*width: 1100px;*/
+ height: calc(90vh - 200px);
text-align: center;
position: relative;
}
+ .point {
+ width: 24px;
+ height: 24px;
+ position: relative;
+ display: inline-block;
+ cursor: pointer;
+ }
+ .point-camera {
+ background: url("../../assets/overview_images/icons/icon-camera-point.png");
+ background-size: contain;
+ @extend .point;
+ }
+ .point-fence {
+ background: url("../../assets/overview_images/icons/icon-fence-unchecked.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -420,23 +502,27 @@
.dev-normal {
background: url("../../assets/overview_images/normal.png");
background-size: contain;
+ color: #00ff0c;
}
.dev-alarm {
background: url("../../assets/overview_images/alarm.png");
background-size: contain;
+ color: #ff0000;
}
.dev-offline {
background: url("../../assets/overview_images/offline.png");
background-size: contain;
+ color: #fff000;
}
.dev-closed {
background: url("../../assets/overview_images/closed.png");
background-size: contain;
+ color: #00fff6;
}
.dev-status-block {
position: absolute;
- top: 120px;
+ top: 100px;
left: 20px;
color: #ffffff;
}
@@ -444,21 +530,17 @@
.alarm-now-block {
position: absolute;
z-index: 500;
- background-color: rgba(255, 234, 241,0.8);
- top: 150px;
+ top: 300px;
left: 20px;
- width: 280px;
+ width: 480px;
.map-alarm-div-header {
line-height: 40px;
- width: 504px;
padding-left: 10px;
+ color: #00fff6;
+ font-size: 24px;
.icon-right {
- position: absolute;
- right: 15px;
- }
- .icon-right:hover {
- color: #409EFF;
cursor: pointer;
+ margin-left: 20px;
}
}
.el-scrollbar {
@@ -476,18 +558,6 @@
.el-table {
font-size: 12px;
}
- .el-table th {
- /*background-color: rgba(255, 229, 230, 0.8);*/
- padding: 7px 0px;
- }
- .el-table td {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- padding: 5px 0px;
- /*line-height: 1;*/
- }
- .el-table td:hover {
- /*background-color: rgba(255, 234, 241, 0.8);*/
- }
.transition-box {
margin-bottom: 10px;
width: 200px;
@@ -502,100 +572,184 @@
}
}
+ .alarm-now-block /deep/ .el-table th {
+ background-color: #0757A0;
+ padding: 12px 0px;
+ font-size: 16px;
+ color: #00fff6;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table td {
+ /*background-color: #0757A0;*/
+ padding: 10px 0px;
+ font-size: 15px;
+ color: #FFFFFF;
+ font-weight: normal;
+ }
+
+ .alarm-now-block /deep/ .el-table__row td {
+ background-color: #023D83;
+ }
+ .alarm-now-block /deep/ .el-table__body tr:hover > td {
+ background-color: #0757A0;
+ }
+ .alarm-now-block /deep/ tr.el-table__row--striped td {
+ background-color: #0757A0;
+ }
+
.map-tab {
position: absolute;
- right: 30px;
+ right: 20px;
top: 100px;
- width: 100px;
+ width: 300px;
button {
margin: 5px 0px;
}
}
+ .tab-top {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-top-bg.png");
+ }
+ .tab-bottom {
+ position: relative;
+ width: 284px;
+ height: 24px;
+ background: url("../../assets/overview_images/tab-bottom-bg.png");
+ }
+ .map-index-button {
+ position: relative;
+ width: 284px;
+ height: 74px;
+ background: url("../../assets/overview_images/tab-index-unchecked.png");
+ font-size: 32px;
+ line-height: 74px;
+ text-align: center;
+ color: #FFFFFF;
+ cursor: pointer;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked.png");
+ }
+ .sub-tab-guider {
+ width: 149px;
+ height: 50px;
+ background: url("../../assets/overview_images/sub-tab-guider.png");
+ }
+ .sub-tab-border {
+ width: 204px;
+ height: 253px;
+ background: url("../../assets/overview_images/sub-tab-border.png");
+ }
+ .sub-tab-content {
+ text-align: center;
+ color: #FFFFFF;
+ font-size: 28px;
+ cursor: pointer;
+ width: 200px;
+ }
+
.dev-detail-block {
- position: absolute;
- right: 30px;
- top: 400px;
- width: 300px;
+ /*position: absolute;*/
+ /*right: 20px;*/
+ /*bottom: 100px;*/
+ width: 520px;
+ height: 335px;
color: #00FFFF;
- font-size: 12px;
+ font-size: 24px;
font-family: "Microsoft YaHei";
+ padding: 45px 60px;
+ line-height: 35px;
+ background: url("../../assets/overview_images/dev-info.png");
+ .dev-detail-span {
+ margin-left: 20px;
+ }
+ .dev-detail-close::before {
+ content: "\2716";
+ position: relative;
+ top: -20px;
+ right: -410px;
+ cursor: pointer;
+ }
}
.dev-footer {
- position: fixed;
- bottom: 50px;
+ position: absolute;
+ bottom: 25px;
}
.dev-icon {
- width: calc(10vw - 5px);
+ width: 195px;
+ height: 105px;
vertical-align: middle;
- border: 1px solid #00ffff;
- padding: 10px 5px !important;
- margin-left: 5px;
+ line-height: 65px;
+ padding: 20px 30px !important;
+ margin-left: 15px;
cursor: pointer;
+ background: url("../../assets/overview_images/dev-type-border-unchecked.png");
}
+
.dev-icon img {
height: 40px;
vertical-align:middle;
}
.dev-icon span {
- font-size: 14px;
+ font-size: 20px;
color: #00D2FF;
- line-height: 40px;
- height: 40px;
+ line-height: 65px;
+ height: 65px;
vertical-align:middle;
float: right;
}
- .point {
- width: 16px;
- height: 16px;
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: url("../../assets/overview_images/icons/icon-camera.png");
- background-size: contain;
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked.png");
}
+ .dev-type-selected span {
+ color: #f58a88 !important;
+ }
+
+ /*@media(max-width: 1440px) {*/
+ /* .main-title {*/
+ /* height: 68px;*/
+ /* padding-top: 20px;*/
+ /* background: url("../../assets/overview_images/title-background-1440.png");*/
+ /* }*/
+ /* .main-title span {*/
+ /* font-size: 24px;*/
+ /* }*/
+ /* .main-title img {*/
+ /* margin-right: 15px;*/
+ /* width: 32px;*/
+ /* height: 32px;*/
+ /* }*/
+
+ /* .home-icon {*/
+ /* left: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+ /* .exit-icon {*/
+ /* right: 18px;*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .home-icon img, .exit-icon img {*/
+ /* width: 18px;*/
+ /* height: 18px;*/
+ /* }*/
+
+ /* .dev-icon span {*/
+ /* font-size: 12px;*/
+ /* }*/
+ /*}*/
@media(max-width: 1440px) {
.main-title {
- height: 68px;
- padding-top: 20px;
- background: url("../../assets/overview_images/title-background-1440.png");
- }
- .main-title span {
- font-size: 24px;
- }
- .main-title img {
- margin-right: 15px;
- width: 32px;
- height: 32px;
- }
-
- .home-icon {
- left: 18px;
- width: 18px;
- height: 18px;
- }
- .exit-icon {
- right: 18px;
- width: 18px;
- height: 18px;
- }
-
- .home-icon img, .exit-icon img {
- width: 18px;
- height: 18px;
- }
-
- .dev-icon span {
- font-size: 12px;
- }
- }
-
- @media(max-width: 1366px) {
- .main-title {
height: 65px;
padding-top: 16px;
background: url("../../assets/overview_images/title-background-1366.png");
@@ -625,9 +779,145 @@
height: 20px;
}
- .dev-icon span {
+ .map-overview {
+ margin-top: 35px;
+ height: calc(90vh - 150px);
+ }
+
+ .point {
+ width: 16px;
+ height: 16px;
+ }
+
+ .statis-block {
+ margin-top: 16px;
+ font-size: 36px;
+ }
+ .sub-title {
+ font-size: 24px;
+ }
+ .sub-data-block {
+ width: 90px;
+ height: 114px;
+ }
+
+ .dev-normal {
+ background: url("../../assets/overview_images/normal-1366.png");
+ }
+ .dev-alarm {
+ background: url("../../assets/overview_images/alarm-1366.png");
+ }
+ .dev-offline {
+ background: url("../../assets/overview_images/offline-1366.png");
+ }
+ .dev-closed {
+ background: url("../../assets/overview_images/closed-1366.png");
+ }
+
+ .dev-status-block {
+ top: 90px;
+ left: 16px;
+ }
+
+ .alarm-now-block {
+ top: 220px;
+ left: 16px;
+ width: 360px;
+ .map-alarm-div-header {
+ line-height: 32px;
+ font-size: 20px;
+ }
+ }
+
+ .alarm-now-block /deep/ .el-table th {
+ padding: 8px 0px;
+ font-size: 16px;
+ }
+ .alarm-now-block /deep/ .el-table td {
+ padding: 5px 0px;
font-size: 12px;
}
+
+ .map-tab {
+ right: 16px;
+ top: 90px;
+ width: 215px;
+ button {
+ margin: 5px 0px;
+ }
+ }
+ .tab-top {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-top-bg-1366.png");
+ }
+ .tab-bottom {
+ width: 213px;
+ height: 18px;
+ background: url("../../assets/overview_images/tab-bottom-bg-1366.png");
+ }
+ .map-index-button {
+ width: 210px;
+ height: 56px;
+ background: url("../../assets/overview_images/tab-index-unchecked-1366.png");
+ font-size: 24px;
+ line-height: 56px;
+ }
+ .index-selected {
+ background: url("../../assets/overview_images/tab-index-checked-1366.png");
+ }
+
+ .sub-tab-guider {
+ width: 110px;
+ height: 37px;
+ background: url("../../assets/overview_images/sub-tab-guider-1366.png");
+ }
+ .sub-tab-border {
+ width: 150px;
+ height: 186px;
+ background: url("../../assets/overview_images/sub-tab-border-1366.png");
+ }
+ .sub-tab-content {
+ font-size: 20px;
+ cursor: pointer;
+ width: 145px;
+ }
+
+ .dev-detail-block {
+ width: 390px;
+ height: 251px;
+ font-size: 16px;
+ padding: 30px 40px;
+ line-height: 28px;
+ background: url("../../assets/overview_images/dev-info-1366.png");
+ .dev-detail-close::before {
+ top: -12px;
+ right: -312px;
+ }
+ }
+
+ .dev-footer {
+ bottom: 20px;
+ }
+ .dev-icon {
+ width: 140px;
+ height: 76px;
+ line-height: 56px;
+ padding: 10px 16px !important;
+ margin-left: 15px;
+ background: url("../../assets/overview_images/dev-type-border-unchecked-1366.png");
+ }
+ .dev-icon img {
+ height: 32px;
+ }
+ .dev-icon span {
+ font-size: 16px;
+ line-height: 56px;
+ height: 56px;
+ }
+ .dev-type-selected {
+ background: url("../../assets/overview_images/dev-type-border-checked-1366.png");
+ }
}
diff --git a/src/views/overview/fenceIndex.vue b/src/views/overview/fenceIndex.vue
new file mode 100644
index 0000000..6a92ca8
--- /dev/null
+++ b/src/views/overview/fenceIndex.vue
@@ -0,0 +1,923 @@
+
+ {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i
- ![]()
+ ![]()
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
全部
- 人脸识别
-
- 车牌识别
+
+
+
+ 摄像头
-
- 设备名称
- {{ dataForm.name }}
+
+
+
+ 设备名称
+ {{ dataForm.name }}
- 设备编号
- {{ dataForm.devcode }}
+ 设备编号
+ {{ dataForm.devcode }}
- 设备类型
- {{ dataForm.typeName }}
+ 设备类型
+ {{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
-
- 在线状态
- {{ dataForm.onlineStatusName }}
+
+ 安装日期
+ {{ dataForm.installDate }}
-
- 安装日期
- {{ dataForm.installDate }}
-
-
-
- 安装位置
- {{ dataForm.position }}
-
-
-
-
- {{ dataForm.inOutName }}
+
+ 安装位置
+ {{ dataForm.position }}
-
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
new file mode 100644
index 0000000..cdc6c5c
--- /dev/null
+++ b/src/views/overview/regionIndex.vue
@@ -0,0 +1,923 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 574d6c5..f68473e 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -210,8 +210,8 @@
this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
new file mode 100644
index 0000000..cdc6c5c
--- /dev/null
+++ b/src/views/overview/regionIndex.vue
@@ -0,0 +1,923 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 574d6c5..f68473e 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -210,8 +210,8 @@
this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/keyIndex.vue b/src/views/overview/keyIndex.vue
new file mode 100644
index 0000000..bf97bf5
--- /dev/null
+++ b/src/views/overview/keyIndex.vue
@@ -0,0 +1,1105 @@
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+ 温湿度
+
+
+
+
+
+ 烟感
+
+
+
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/overview/regionIndex.vue b/src/views/overview/regionIndex.vue
new file mode 100644
index 0000000..cdc6c5c
--- /dev/null
+++ b/src/views/overview/regionIndex.vue
@@ -0,0 +1,923 @@
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+ 温湿度
+
+
+ 烟感
+
+
+ 声光报警
+
+
+
+
+
+
+
+
+
+
+
+ 三号楼一层
+ 四号楼一层
+ 四号楼五层
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+
+
+ 全部
+
+
+
+
+
+ 摄像头
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/staff/staffAdd.vue b/src/views/staff/staffAdd.vue
index 574d6c5..f68473e 100644
--- a/src/views/staff/staffAdd.vue
+++ b/src/views/staff/staffAdd.vue
@@ -210,8 +210,8 @@
this.fetchIrisRegions() // 获取虹膜设备关联区域的列表
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 正常
+
+
+
+ 报警
+
+
+
+ 离线
+
+
+
+ 关闭
+
+
+
+
+
+
+ {{ scope.row[column.value] }}
+
+
+
+
+
+
+
+
+ 报警列表
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+ 全部
+
+
+ 摄像头
+
+
+
+ 设备名称
+ {{ dataForm.name }}
+
+
+
+ 设备编号
+ {{ dataForm.devcode }}
+
+
+
+ 设备类型
+ {{ dataForm.typeName }}
+
+
+
+ 在线状态
+ {{ dataForm.onlineStatusName }}
+
+
+
+ 安装日期
+ {{ dataForm.installDate }}
+
+
+
+ 安装位置
+ {{ dataForm.position }}
+
+
+
+
+
+
+