- ![]()
+ ![]()
-
+
+
全部
+ 
声光报警
- ![]()
+ ![]()
-
+
+
全部
+
声光报警
-
-
-
-
-
-
+
+
+
+
+
+
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-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-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/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-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/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-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-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-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/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
-
+
全部
@@ -116,8 +122,8 @@
烟感
-
-
+
+
声光报警
@@ -155,11 +161,6 @@
{{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
-
-
在线状态
{{ dataForm.onlineStatusName }}
@@ -227,7 +228,8 @@
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- footLeft: 10,
+ halfLeft: 0,
+ footLeft: 0,
showFence: true,
showTemp: false,
showSmoking: false,
@@ -281,26 +283,37 @@
const that = this
window.onresize = function() {
- that.reDrawDevs()
+ that.initWindowSize()
+ that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
+ // 获取窗口大小
initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
+
+ // 设置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.changeMap('tg_main')
- // this.reDrawDevs()
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
},
+ // 重新绘制设备点位
reDrawDevs() {
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
@@ -320,7 +333,26 @@
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ 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) {
@@ -331,14 +363,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- this.reDrawDevs()
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -356,6 +381,7 @@
backToIndex() {
this.$router.push('/ctrl')
},
+ // 选择设备类型
selectDevByType(type, event) {
// 遍历所有的设备类型
const devTypes = document.querySelectorAll('.dev-icon')
@@ -370,6 +396,7 @@
console.log(event.currentTarget)
},
+ // 点击平面图一级按钮
selectMapTab(tab, event) {
// 遍历所有的地图
const mapTabs = document.querySelectorAll('.map-index-button')
@@ -389,95 +416,140 @@
this.showFloorFour = false
this.$refs['sub-tab'].style.position = 'absolute'
- this.$refs['sub-tab'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '135px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '185px'
-
this.$refs['sub-tab-floor-3'].style.position = 'absolute'
- this.$refs['sub-tab-floor-3'].style.right = '340px'
- this.$refs['sub-tab-floor-3'].style.top = '220px'
+
+ 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'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '210px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '260px'
-
this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
- 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.position = 'absolute'
- this.$refs['sub-tab-floor-4-5'].style.right = '340px'
- this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+
+ 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.showSubTabGuider = false
- this.showFloorThree = false
- this.showFloorFour = false
this.changeMap('tg_main')
}
},
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- this.showFence = true
- this.showTemp = false
- this.showSound = false
- this.showSmoking = false
- this.footLeft = (this.winSize.width - 3 * 210) / 2
- this.devListParams.picture = '1'
-
- if (index === 'tg_3_1') {
- this.bgImageSrc = tg_3_1
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '2'
- } else if (index === 'tg_4_1') {
- this.bgImageSrc = tg_4_1
- this.imgSizeOriginal = { width: 2218, height: 2169 }
-
- this.showFence = false
- this.showTemp = true
- this.showSmoking = true
- this.showSound = true
- this.footLeft = (this.winSize.width - 5 * 210) / 2
-
- this.devListParams.picture = '3'
- } else if (index === 'tg_4_5') {
- this.bgImageSrc = tg_4_5
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '4'
- }
-
- // 将二级菜单的指引区隐藏
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.fetchDeviceData()
},
+ // 查询并显示设备详情
detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -517,8 +589,24 @@
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: '' // 进出营
+ }
}
}
}
@@ -583,6 +671,23 @@
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.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -877,21 +982,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/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/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
-
- {{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
-
+
全部
@@ -116,8 +122,8 @@
烟感
-
-
+
+
声光报警
@@ -155,11 +161,6 @@
{{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
-
-
在线状态
{{ dataForm.onlineStatusName }}
@@ -227,7 +228,8 @@
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- footLeft: 10,
+ halfLeft: 0,
+ footLeft: 0,
showFence: true,
showTemp: false,
showSmoking: false,
@@ -281,26 +283,37 @@
const that = this
window.onresize = function() {
- that.reDrawDevs()
+ that.initWindowSize()
+ that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
+ // 获取窗口大小
initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
+
+ // 设置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.changeMap('tg_main')
- // this.reDrawDevs()
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
},
+ // 重新绘制设备点位
reDrawDevs() {
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
@@ -320,7 +333,26 @@
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ 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) {
@@ -331,14 +363,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- this.reDrawDevs()
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -356,6 +381,7 @@
backToIndex() {
this.$router.push('/ctrl')
},
+ // 选择设备类型
selectDevByType(type, event) {
// 遍历所有的设备类型
const devTypes = document.querySelectorAll('.dev-icon')
@@ -370,6 +396,7 @@
console.log(event.currentTarget)
},
+ // 点击平面图一级按钮
selectMapTab(tab, event) {
// 遍历所有的地图
const mapTabs = document.querySelectorAll('.map-index-button')
@@ -389,95 +416,140 @@
this.showFloorFour = false
this.$refs['sub-tab'].style.position = 'absolute'
- this.$refs['sub-tab'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '135px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '185px'
-
this.$refs['sub-tab-floor-3'].style.position = 'absolute'
- this.$refs['sub-tab-floor-3'].style.right = '340px'
- this.$refs['sub-tab-floor-3'].style.top = '220px'
+
+ 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'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '210px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '260px'
-
this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
- 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.position = 'absolute'
- this.$refs['sub-tab-floor-4-5'].style.right = '340px'
- this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+
+ 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.showSubTabGuider = false
- this.showFloorThree = false
- this.showFloorFour = false
this.changeMap('tg_main')
}
},
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- this.showFence = true
- this.showTemp = false
- this.showSound = false
- this.showSmoking = false
- this.footLeft = (this.winSize.width - 3 * 210) / 2
- this.devListParams.picture = '1'
-
- if (index === 'tg_3_1') {
- this.bgImageSrc = tg_3_1
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '2'
- } else if (index === 'tg_4_1') {
- this.bgImageSrc = tg_4_1
- this.imgSizeOriginal = { width: 2218, height: 2169 }
-
- this.showFence = false
- this.showTemp = true
- this.showSmoking = true
- this.showSound = true
- this.footLeft = (this.winSize.width - 5 * 210) / 2
-
- this.devListParams.picture = '3'
- } else if (index === 'tg_4_5') {
- this.bgImageSrc = tg_4_5
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '4'
- }
-
- // 将二级菜单的指引区隐藏
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.fetchDeviceData()
},
+ // 查询并显示设备详情
detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -517,8 +589,24 @@
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: '' // 进出营
+ }
}
}
}
@@ -583,6 +671,23 @@
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.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -877,21 +982,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/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/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 {
const list = response.data.list
- for(var i=0;i
-
- {{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
-
+
全部
@@ -116,8 +122,8 @@
烟感
-
-
+
+
声光报警
@@ -155,11 +161,6 @@
{{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
-
-
在线状态
{{ dataForm.onlineStatusName }}
@@ -227,7 +228,8 @@
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- footLeft: 10,
+ halfLeft: 0,
+ footLeft: 0,
showFence: true,
showTemp: false,
showSmoking: false,
@@ -281,26 +283,37 @@
const that = this
window.onresize = function() {
- that.reDrawDevs()
+ that.initWindowSize()
+ that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
+ // 获取窗口大小
initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
+
+ // 设置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.changeMap('tg_main')
- // this.reDrawDevs()
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
},
+ // 重新绘制设备点位
reDrawDevs() {
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
@@ -320,7 +333,26 @@
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ 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) {
@@ -331,14 +363,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- this.reDrawDevs()
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -356,6 +381,7 @@
backToIndex() {
this.$router.push('/ctrl')
},
+ // 选择设备类型
selectDevByType(type, event) {
// 遍历所有的设备类型
const devTypes = document.querySelectorAll('.dev-icon')
@@ -370,6 +396,7 @@
console.log(event.currentTarget)
},
+ // 点击平面图一级按钮
selectMapTab(tab, event) {
// 遍历所有的地图
const mapTabs = document.querySelectorAll('.map-index-button')
@@ -389,95 +416,140 @@
this.showFloorFour = false
this.$refs['sub-tab'].style.position = 'absolute'
- this.$refs['sub-tab'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '135px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '185px'
-
this.$refs['sub-tab-floor-3'].style.position = 'absolute'
- this.$refs['sub-tab-floor-3'].style.right = '340px'
- this.$refs['sub-tab-floor-3'].style.top = '220px'
+
+ 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'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '210px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '260px'
-
this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
- 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.position = 'absolute'
- this.$refs['sub-tab-floor-4-5'].style.right = '340px'
- this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+
+ 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.showSubTabGuider = false
- this.showFloorThree = false
- this.showFloorFour = false
this.changeMap('tg_main')
}
},
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- this.showFence = true
- this.showTemp = false
- this.showSound = false
- this.showSmoking = false
- this.footLeft = (this.winSize.width - 3 * 210) / 2
- this.devListParams.picture = '1'
-
- if (index === 'tg_3_1') {
- this.bgImageSrc = tg_3_1
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '2'
- } else if (index === 'tg_4_1') {
- this.bgImageSrc = tg_4_1
- this.imgSizeOriginal = { width: 2218, height: 2169 }
-
- this.showFence = false
- this.showTemp = true
- this.showSmoking = true
- this.showSound = true
- this.footLeft = (this.winSize.width - 5 * 210) / 2
-
- this.devListParams.picture = '3'
- } else if (index === 'tg_4_5') {
- this.bgImageSrc = tg_4_5
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '4'
- }
-
- // 将二级菜单的指引区隐藏
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.fetchDeviceData()
},
+ // 查询并显示设备详情
detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -517,8 +589,24 @@
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: '' // 进出营
+ }
}
}
}
@@ -583,6 +671,23 @@
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.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -877,21 +982,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/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/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 {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i
-
- {{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
-
+
全部
@@ -116,8 +122,8 @@
烟感
-
-
+
+
声光报警
@@ -155,11 +161,6 @@
{{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
-
-
在线状态
{{ dataForm.onlineStatusName }}
@@ -227,7 +228,8 @@
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- footLeft: 10,
+ halfLeft: 0,
+ footLeft: 0,
showFence: true,
showTemp: false,
showSmoking: false,
@@ -281,26 +283,37 @@
const that = this
window.onresize = function() {
- that.reDrawDevs()
+ that.initWindowSize()
+ that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
+ // 获取窗口大小
initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
+
+ // 设置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.changeMap('tg_main')
- // this.reDrawDevs()
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
},
+ // 重新绘制设备点位
reDrawDevs() {
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
@@ -320,7 +333,26 @@
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ 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) {
@@ -331,14 +363,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- this.reDrawDevs()
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -356,6 +381,7 @@
backToIndex() {
this.$router.push('/ctrl')
},
+ // 选择设备类型
selectDevByType(type, event) {
// 遍历所有的设备类型
const devTypes = document.querySelectorAll('.dev-icon')
@@ -370,6 +396,7 @@
console.log(event.currentTarget)
},
+ // 点击平面图一级按钮
selectMapTab(tab, event) {
// 遍历所有的地图
const mapTabs = document.querySelectorAll('.map-index-button')
@@ -389,95 +416,140 @@
this.showFloorFour = false
this.$refs['sub-tab'].style.position = 'absolute'
- this.$refs['sub-tab'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '135px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '185px'
-
this.$refs['sub-tab-floor-3'].style.position = 'absolute'
- this.$refs['sub-tab-floor-3'].style.right = '340px'
- this.$refs['sub-tab-floor-3'].style.top = '220px'
+
+ 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'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '210px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '260px'
-
this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
- 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.position = 'absolute'
- this.$refs['sub-tab-floor-4-5'].style.right = '340px'
- this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+
+ 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.showSubTabGuider = false
- this.showFloorThree = false
- this.showFloorFour = false
this.changeMap('tg_main')
}
},
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- this.showFence = true
- this.showTemp = false
- this.showSound = false
- this.showSmoking = false
- this.footLeft = (this.winSize.width - 3 * 210) / 2
- this.devListParams.picture = '1'
-
- if (index === 'tg_3_1') {
- this.bgImageSrc = tg_3_1
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '2'
- } else if (index === 'tg_4_1') {
- this.bgImageSrc = tg_4_1
- this.imgSizeOriginal = { width: 2218, height: 2169 }
-
- this.showFence = false
- this.showTemp = true
- this.showSmoking = true
- this.showSound = true
- this.footLeft = (this.winSize.width - 5 * 210) / 2
-
- this.devListParams.picture = '3'
- } else if (index === 'tg_4_5') {
- this.bgImageSrc = tg_4_5
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '4'
- }
-
- // 将二级菜单的指引区隐藏
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.fetchDeviceData()
},
+ // 查询并显示设备详情
detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -517,8 +589,24 @@
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: '' // 进出营
+ }
}
}
}
@@ -583,6 +671,23 @@
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.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -877,21 +982,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/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/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 {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i
-
+
@@ -207,8 +207,8 @@
mounted() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
-
- {{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
-
+
全部
@@ -116,8 +122,8 @@
烟感
-
-
+
+
声光报警
@@ -155,11 +161,6 @@
{{ dataForm.typeName }}
-
- 设备型号
- {{ dataForm.model }}
-
-
在线状态
{{ dataForm.onlineStatusName }}
@@ -227,7 +228,8 @@
width: 1440,
height: 789
}, // 屏幕窗口尺寸
- footLeft: 10,
+ halfLeft: 0,
+ footLeft: 0,
showFence: true,
showTemp: false,
showSmoking: false,
@@ -281,26 +283,37 @@
const that = this
window.onresize = function() {
- that.reDrawDevs()
+ that.initWindowSize()
+ that.getBgImageSize()
+ // that.reDrawDevs()
}
},
methods: {
+ // 获取窗口大小
initWindowSize() {
// 获取窗体尺寸
this.winSize = {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
+
+ // 设置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.changeMap('tg_main')
- // this.reDrawDevs()
+ this.halfLeft = (this.winSize.width - this.imgSize.width) / 2
},
+ // 重新绘制设备点位
reDrawDevs() {
const halfLeft = (this.winSize.width - this.imgSize.width) / 2
@@ -320,7 +333,26 @@
}
})
},
- // 获取设备状态
+ // 获取设备列表
+ 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) {
@@ -331,14 +363,7 @@
}
})
},
- fetchDeviceData() {
- overviewDeviceList(this.devListParams).then(response => {
- if (response.code === 200) {
- this.devList = response.data
- this.reDrawDevs()
- }
- })
- },
+ // 获取报警列表
fetchAlarmNowData() {
alarmListOverview().then(response => {
if (response.code === 200) {
@@ -356,6 +381,7 @@
backToIndex() {
this.$router.push('/ctrl')
},
+ // 选择设备类型
selectDevByType(type, event) {
// 遍历所有的设备类型
const devTypes = document.querySelectorAll('.dev-icon')
@@ -370,6 +396,7 @@
console.log(event.currentTarget)
},
+ // 点击平面图一级按钮
selectMapTab(tab, event) {
// 遍历所有的地图
const mapTabs = document.querySelectorAll('.map-index-button')
@@ -389,95 +416,140 @@
this.showFloorFour = false
this.$refs['sub-tab'].style.position = 'absolute'
- this.$refs['sub-tab'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '135px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '185px'
-
this.$refs['sub-tab-floor-3'].style.position = 'absolute'
- this.$refs['sub-tab-floor-3'].style.right = '340px'
- this.$refs['sub-tab-floor-3'].style.top = '220px'
+
+ 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'].style.right = '290px'
- this.$refs['sub-tab'].style.top = '210px'
-
this.$refs['sub-tab-border'].style.position = 'absolute'
- this.$refs['sub-tab-border'].style.right = '335px'
- this.$refs['sub-tab-border'].style.top = '260px'
-
this.$refs['sub-tab-floor-4-1'].style.position = 'absolute'
- 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.position = 'absolute'
- this.$refs['sub-tab-floor-4-5'].style.right = '340px'
- this.$refs['sub-tab-floor-4-5'].style.top = '350px'
+
+ 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.showSubTabGuider = false
- this.showFloorThree = false
- this.showFloorFour = false
this.changeMap('tg_main')
}
},
+ // 切换地图
changeMap(index) {
- this.bgImageSrc = tg_main
this.imgSizeOriginal = { width: 2245, height: 1586 }
- this.showFence = true
- this.showTemp = false
- this.showSound = false
- this.showSmoking = false
- this.footLeft = (this.winSize.width - 3 * 210) / 2
- this.devListParams.picture = '1'
-
- if (index === 'tg_3_1') {
- this.bgImageSrc = tg_3_1
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '2'
- } else if (index === 'tg_4_1') {
- this.bgImageSrc = tg_4_1
- this.imgSizeOriginal = { width: 2218, height: 2169 }
-
- this.showFence = false
- this.showTemp = true
- this.showSmoking = true
- this.showSound = true
- this.footLeft = (this.winSize.width - 5 * 210) / 2
-
- this.devListParams.picture = '3'
- } else if (index === 'tg_4_5') {
- this.bgImageSrc = tg_4_5
-
- this.showFence = false
- this.showTemp = false
- this.showSmoking = false
- this.showSound = false
- this.footLeft = (this.winSize.width - 2 * 210) / 2
-
- this.devListParams.picture = '4'
- }
-
- // 将二级菜单的指引区隐藏
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.fetchDeviceData()
},
+ // 查询并显示设备详情
detailDev(dev, event) {
+ this.resetDevDetail()
getDetailDevice(dev.id).then(response => {
if (response.code === 200) {
this.dataForm = {
@@ -517,8 +589,24 @@
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: '' // 进出营
+ }
}
}
}
@@ -583,6 +671,23 @@
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.png");
+ background-size: contain;
+ @extend .point;
+ }
.statis-block {
text-align: center;
@@ -877,21 +982,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/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/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 {
const list = response.data.list
- for(var i=0;i {
const list = response.data.list
- for(var i=0;i
-
+
@@ -207,8 +207,8 @@
mounted() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i
-
+
@@ -237,8 +237,8 @@
mounted() {
getDeptTreeList().then(response => {
const list = response.data.list
- for(var i=0;i