868 lines
26 KiB
Vue
868 lines
26 KiB
Vue
<template>
|
||
<div class="securityMain">
|
||
<div class="left">
|
||
<div class="leftOne">
|
||
<div class="title">安防统计数据</div>
|
||
<!-- <div class="security"> -->
|
||
<!-- <img src="../assets/images/anFangAc.png" class="securityImg"/>
|
||
<div class="securitySupervision">安防监管</div>
|
||
<div class="securityCount">
|
||
<div
|
||
class="securityList"
|
||
v-for="(item, index) in securityList"
|
||
:key="index"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
<span>{{ item.count }}</span>
|
||
</div>
|
||
|
||
</div>
|
||
<img src="../assets/images/anFangAc.png" class="securityImg"/>
|
||
<div class="securitySupervision">安防监管</div>
|
||
<div class="securityCount">
|
||
<div
|
||
class="securityList"
|
||
v-for="(item, index) in securityList"
|
||
:key="index"
|
||
>
|
||
<span>{{ item.name }}</span>
|
||
<span>{{ item.count }}</span>
|
||
</div>
|
||
</div> -->
|
||
<el-carousel
|
||
class="security"
|
||
:autoplay="true"
|
||
trigger="click"
|
||
:interval="7000"
|
||
>
|
||
<el-carousel-item
|
||
v-for="(item, index) in securityList"
|
||
:key="index"
|
||
class="equipmentEnergy"
|
||
>
|
||
<img src="../assets/images/anFangAc.png" class="securityImg" />
|
||
<!-- <div class="securitySupervision">安防监管</div> -->
|
||
<div class="securitySupervision">{{ item.tit }}</div>
|
||
<div class="securityCount">
|
||
<div
|
||
class="securityList"
|
||
v-for="(i, k) in item.security"
|
||
:key="k"
|
||
>
|
||
<span>{{ i.name }}</span>
|
||
<span>{{ i.count }}</span>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<!-- </div> -->
|
||
</div>
|
||
<div class="leftTwo">
|
||
<div class="title" style="height: 8%">预警视频监控联动</div>
|
||
<div class="warnVideo">
|
||
<!-- <div class="warnCamera">
|
||
<img src="../assets/images/camera.png" style="width:100%;height:100%"/>
|
||
</div> -->
|
||
<div class="warnCameraList">
|
||
<div
|
||
style="width: 45%; height: 30%"
|
||
v-for="(item, index) in warnCameraList"
|
||
:key="index"
|
||
@click="videoChange(index)"
|
||
>
|
||
<img :src="item.icon" style="width: 100%; height: 100%" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="rightOne">
|
||
<div class="title" style="height: 10%">火灾报警管理</div>
|
||
<div class="fire">
|
||
<div
|
||
class="warnList"
|
||
v-for="(item, index) in fireWarnList"
|
||
:key="index"
|
||
>
|
||
<img :src="item.icon" />
|
||
<div
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
width: 65%;
|
||
"
|
||
>
|
||
<span
|
||
style="display: flex; width: 100%; justify-content: flex-start"
|
||
>报警时间:<span style="margin-left: 5%">{{
|
||
item.time
|
||
}}</span></span
|
||
>
|
||
<span
|
||
style="
|
||
margin-top: 3%;
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
"
|
||
>设备定位:<span
|
||
style="color: rgb(0, 255, 255); margin-left: 5%"
|
||
>{{ item.position }}</span
|
||
></span
|
||
>
|
||
<span
|
||
style="
|
||
margin-top: 3%;
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
"
|
||
>报警状态:<span
|
||
style="color: rgb(0, 255, 255); margin-left: 5%"
|
||
>{{ item.status }}</span
|
||
></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rightTwo">
|
||
<div class="title" style="height: 10%">安防报警管理</div>
|
||
<div class="police">
|
||
<div
|
||
class="warnList"
|
||
v-for="(item, index) in policeList"
|
||
:key="index"
|
||
>
|
||
<span>{{ item.id }}</span>
|
||
<img :src="item.icon" />
|
||
<div
|
||
style="
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
width: 65%;
|
||
"
|
||
>
|
||
<span
|
||
style="display: flex; width: 100%; justify-content: flex-start"
|
||
>报警时间:<span style="margin-left: 5%">{{
|
||
item.time
|
||
}}</span></span
|
||
>
|
||
<span
|
||
style="
|
||
margin-top: 3%;
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
"
|
||
><span style="white-space: nowrap">设备内容:</span
|
||
><span
|
||
style="
|
||
color: rgb(0, 255, 255);
|
||
margin-left: 5%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
text-align: left;
|
||
"
|
||
>{{ item.position }}</span
|
||
></span
|
||
>
|
||
<span
|
||
style="
|
||
margin-top: 3%;
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: flex-start;
|
||
"
|
||
>报警状态:<span
|
||
style="color: rgb(0, 255, 255); margin-left: 5%"
|
||
>{{ item.status }}</span
|
||
></span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { GetLevelAlarm, getSecurityAlarmCount } from "../api/index";
|
||
import { getHikvision } from "../api/haikang";
|
||
export default {
|
||
name: "security",
|
||
data() {
|
||
return {
|
||
securityList: [
|
||
{
|
||
tit: "摄像头监管",
|
||
security: [
|
||
{
|
||
name: "",
|
||
count: "",
|
||
},
|
||
{
|
||
name: "摄像头总数",
|
||
count: "609",
|
||
},
|
||
{
|
||
name: "摄像头在线数量",
|
||
count: "602",
|
||
},
|
||
{
|
||
name: "摄像头离线数量",
|
||
count: "7",
|
||
},
|
||
{
|
||
name: "摄像头报警数",
|
||
count: "0",
|
||
},
|
||
{
|
||
name: "摄像头昨日报警数",
|
||
count: "0",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
tit: "门禁监管",
|
||
security: [
|
||
{
|
||
name: "",
|
||
count: "",
|
||
},
|
||
{
|
||
name: "门禁总数",
|
||
count: "609",
|
||
},
|
||
{
|
||
name: "门禁在线数量",
|
||
count: "602",
|
||
},
|
||
{
|
||
name: "门禁离线数量",
|
||
count: "7",
|
||
},
|
||
{
|
||
name: "门禁今日报警数",
|
||
count: "0",
|
||
},
|
||
{
|
||
name: "门禁昨日报警数",
|
||
count: "0",
|
||
},
|
||
],
|
||
},
|
||
|
||
|
||
],
|
||
warnCameraList: [
|
||
{
|
||
icon: require("../assets/images/anFang/videoAc.png"),
|
||
},
|
||
{
|
||
icon: require("../assets/images/anFang/video.png"),
|
||
},
|
||
{
|
||
icon: require("../assets/images/anFang/video.png"),
|
||
},
|
||
{
|
||
icon: require("../assets/images/anFang/video.png"),
|
||
},
|
||
{
|
||
icon: require("../assets/images/anFang/video.png"),
|
||
},
|
||
{
|
||
icon: require("../assets/images/anFang/video.png"),
|
||
},
|
||
],
|
||
fireWarnList: [
|
||
{
|
||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "烟感",
|
||
status: "已解除",
|
||
},
|
||
{
|
||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "烟感",
|
||
status: "已解除",
|
||
},
|
||
{
|
||
icon: require("../assets/images/jieNengImg/warnWhite.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "烟感",
|
||
status: "已解除",
|
||
},
|
||
{
|
||
icon: require("../assets/images/jieNengImg/warnBlue.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "烟感",
|
||
status: "已解除",
|
||
},
|
||
], //故障数组
|
||
policeList: [
|
||
{
|
||
id: "1",
|
||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "306门禁故障",
|
||
status: "已解除",
|
||
},
|
||
{
|
||
id: "2",
|
||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "201门禁故障",
|
||
status: "已解除",
|
||
},
|
||
{
|
||
id: "3",
|
||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "206门禁故障",
|
||
status: "已解除",
|
||
},
|
||
{
|
||
id: "4",
|
||
icon: require("../assets/images/anFang/exclamatory.png"),
|
||
time: "2023年03月12日 15:45:10",
|
||
position: "106门禁故障",
|
||
status: "已解除",
|
||
},
|
||
],
|
||
alarmFirstLevel: [],
|
||
alarmSecondLevel: [],
|
||
alarmThirdLevel: [],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getAnfang();
|
||
//获取消防告警
|
||
this.getPoliceList();
|
||
this.getFireWarnList();
|
||
// 获取安防告警
|
||
|
||
//获取安防统计今天昨天报警数量
|
||
this.getAlarmCount();
|
||
window.alarmFirstLevel = this.alarmFirstLevel;
|
||
window.alarmSecondLevel = this.alarmSecondLevel;
|
||
window.alarmThirdLevel = this.alarmThirdLevel;
|
||
},
|
||
|
||
watch: {
|
||
alarmFirstLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmFirstLevel", val);
|
||
if (val.length != 0) {
|
||
this.upmqttData(val);
|
||
}
|
||
},
|
||
alarmSecondLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmSecondLevel", val);
|
||
this.upmqttData(val);
|
||
},
|
||
alarmThirdLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmThirdLevel", val);
|
||
this.upmqttData(val);
|
||
},
|
||
},
|
||
watch: {
|
||
alarmFirstLevel(val) {
|
||
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmFirstLevel",val)
|
||
if(val.length!=0){
|
||
this.upmqttData(val)
|
||
}
|
||
|
||
},
|
||
alarmSecondLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmSecondLevel",val)
|
||
this.upmqttData(val)
|
||
},
|
||
alarmThirdLevel(val) {
|
||
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
|
||
console.log("alarmThirdLevel",val)
|
||
this.upmqttData(val)
|
||
},
|
||
},
|
||
methods: {
|
||
//获取昨天今天的报警数量
|
||
getAlarmCount() {
|
||
getSecurityAlarmCount().then((res) => {
|
||
this.securityList[0].security[4].count = res.data.data.VideoTodayCount;
|
||
this.securityList[0].security[5].count =
|
||
res.data.data.VideoYesterdayCount;
|
||
this.securityList[1].security[4].count = res.data.data.DoorTodayCount;
|
||
this.securityList[1].security[5].count =
|
||
res.data.data.DoorYesterdayCount;
|
||
});
|
||
},
|
||
//获取设备离线在线数据
|
||
|
||
getAnfang() {
|
||
//获取门禁状态
|
||
var indexcode = [
|
||
"13222435-8646-4006-982a-76febb4dd8a2",
|
||
"fd91efcf-9d11-4b3e-ad69-6e6c1069f4ec",
|
||
"e3043e94-c8d9-49b2-9627-7a10f15cf079",
|
||
"f5790df0-60e9-4a1f-be2f-e75d6331467d",
|
||
"05859fa6-6440-401e-950f-37ba61094c4d",
|
||
"21ff542a-ca97-4974-88e7-d52408b8a412",
|
||
"608d4d1d-a69a-4d07-82da-553914616b1d",
|
||
"5b5b43cd-a722-4eb4-b3f2-3b60fd1357ad",
|
||
"f524c8df-42f9-4f89-8594-cad8e3cdb37f",
|
||
"71ced52a-f04e-4d74-834c-8e329485106b",
|
||
"8763ebb7-4bc6-4022-80df-a38804f58d39",
|
||
"f349ab39-aa64-4e4f-ae85-585f30321325",
|
||
"8ca45d1f-5919-47df-be93-8c6c4efb81a4",
|
||
"1223f3b3-3fa3-4df2-b03a-058fcb62b4c9",
|
||
"1fc85a1e-1084-4cc2-91a4-ec2b5e74c5a2",
|
||
"b7bb3c6c-ceeb-4fc9-a37e-c7d075fd4ede",
|
||
"beac672d-7555-49fc-bc97-d873fcc8eb48",
|
||
"5a9e819d-af8d-45ea-9a77-bd36a2168e20",
|
||
"17e8a2a0-079b-4e70-bde6-24911980e1b2",
|
||
"d16fe1ce-4251-4cfb-8316-9380196942e1",
|
||
"266a956e-cb4f-47f4-8ab8-ecbbb6f4a3f7",
|
||
"a2038008-e1db-4666-8902-c69af1d7cc50",
|
||
"9273528b-9fa9-4877-8eb0-1595e3accf83",
|
||
"be26abf3-c2dd-41d3-ace1-b8a2006d663c",
|
||
"46ba67a9-e4d0-48ab-b837-255bb963860a",
|
||
"fe6e6dab-4ec7-47c1-a286-8ff661f8b8f6",
|
||
];
|
||
let dataList = {
|
||
path: "/artemis/api/resource/v2/door/search",
|
||
data: {
|
||
regionIndexCodes: indexcode,
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
},
|
||
};
|
||
let indexCodeList = [];
|
||
getHikvision(dataList).then((res) => {
|
||
res.data.result.data.list.forEach((item, index) => {
|
||
indexCodeList.push(item.indexCode);
|
||
});
|
||
let doorStatusList = {
|
||
path: "/artemis/api/acs/v1/door/states",
|
||
data: {
|
||
doorIndexCodes: indexCodeList,
|
||
pageNo:1,
|
||
pageSize:1000
|
||
},
|
||
};
|
||
let doorTotal = 0;
|
||
let doorOnLine = 0;
|
||
let offLine = 0;
|
||
let doorTotalList = [];
|
||
let doorOnLineList = [];
|
||
let offLineList = [];
|
||
getHikvision(doorStatusList).then((res) => {
|
||
console.log(res.data.result.data.authDoorList, "门禁状态数量");
|
||
for (let i = 0; i < res.data.result.data.authDoorList.length; i++) {
|
||
//获取总数的数组
|
||
doorTotalList.push(res.data.result.data.authDoorList);
|
||
if (res.data.result.data.authDoorList[i].doorState == 3) {
|
||
//获取离线的数组
|
||
offLineList.push(res.data.result.data.authDoorList[i].doorState);
|
||
}
|
||
}
|
||
//门禁总数数量
|
||
this.securityList[1].security[1].count = doorTotalList.length;
|
||
//门禁离线数数量
|
||
this.securityList[1].security[3].count = offLineList.length;
|
||
//门禁在线数数量
|
||
this.securityList[1].security[2].count = this.securityList[1].security[1].count - this.securityList[1].security[3].count;
|
||
});
|
||
});
|
||
|
||
//获取视频状态
|
||
let cameraList = {
|
||
path: "/artemis/api/resource/v2/camera/search",
|
||
data: {
|
||
regionIndexCodes: indexcode,
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
},
|
||
};
|
||
let cameraCodeList = []
|
||
getHikvision(cameraList).then((res) => {
|
||
res.data.result.data.list.forEach((item, index) => {
|
||
cameraCodeList.push(item.indexCode);
|
||
});
|
||
let cameraStatusList = {
|
||
path: "/artemis/api/nms/v1/online/camera/get",
|
||
data: {
|
||
indexCodes: cameraCodeList,
|
||
pageNo:1,
|
||
pageSize:1000
|
||
},
|
||
};
|
||
let cameraTotalList = [];
|
||
let cameraOnLineList = [];
|
||
let cameraoffLineList = [];
|
||
getHikvision(cameraStatusList).then((res) => {
|
||
console.log(res.data.result.data.list, "摄像头状态数量");
|
||
for (let i = 0; i < res.data.result.data.list.length; i++) {
|
||
//获取总数的数组
|
||
cameraTotalList.push(res.data.result.data.list);
|
||
if (res.data.result.data.list[i].online == 0) {
|
||
//获取离线的数组
|
||
cameraoffLineList.push(res.data.result.data.list[i].online);
|
||
}
|
||
}
|
||
//门禁总数数量
|
||
this.securityList[0].security[1].count = cameraTotalList.length;
|
||
//门禁离线数数量
|
||
this.securityList[0].security[3].count = cameraoffLineList.length;
|
||
//门禁在线数数量
|
||
this.securityList[0].security[2].count = this.securityList[0].security[1].count - this.securityList[0].security[3].count;
|
||
});
|
||
});
|
||
},
|
||
videoChange(index) {
|
||
this.warnCameraList.forEach((item, i) => {
|
||
item.icon = require("../assets/images/anFang/video.png");
|
||
});
|
||
this.warnCameraList[
|
||
index
|
||
].icon = require("../assets/images/anFang/videoAc.png");
|
||
},
|
||
|
||
//获取火灾报警、
|
||
getFireWarnList() {
|
||
let params = {
|
||
AlarmLevel: "",
|
||
DeviceTypes: "消防",
|
||
};
|
||
GetLevelAlarm(params).then((res) => {
|
||
let icon = null;
|
||
this.fireWarnList = Object.keys(res.data.data).map((item, index) => {
|
||
if (res.data.data[index].Status == 0) {
|
||
res.data.data[index].Status = "未处理";
|
||
icon = require("../assets/images/jieNengImg/warnWhite.png");
|
||
} else {
|
||
res.data.data[index].Status = "已处理";
|
||
icon = require("../assets/images/jieNengImg/warnBlue.png");
|
||
}
|
||
return {
|
||
icon: icon,
|
||
time: this.$moment(res.data.data[index].AlarmTime).format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
),
|
||
DeviceType: res.data.data[index].DeviceType,
|
||
// position: res.data.data[index].DeviceType,
|
||
position: res.data.data[index].AlarmName,
|
||
// status: res.data.data[index].AlarmLevel,
|
||
status: res.data.data[index].Status,
|
||
AlarmLevel: res.data.data[index].AlarmLevel,
|
||
};
|
||
});
|
||
});
|
||
},
|
||
//获取安防报警、
|
||
getPoliceList() {
|
||
let params = {
|
||
AlarmLevel: "",
|
||
DeviceTypes: "门禁,视频监控",
|
||
};
|
||
GetLevelAlarm(params).then((res) => {
|
||
let icon = null;
|
||
this.policeList = Object.keys(res.data.data).map((item, index) => {
|
||
if (res.data.data[index].Status == 0) {
|
||
res.data.data[index].Status = "未处理";
|
||
icon = require("../assets/images/jieNengImg/warnWhite.png");
|
||
} else {
|
||
res.data.data[index].Status = "已处理";
|
||
icon = require("../assets/images/jieNengImg/warnBlue.png");
|
||
}
|
||
return {
|
||
icon: icon,
|
||
time: this.$moment(res.data.data[index].AlarmTime).format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
),
|
||
DeviceType: res.data.data[index].DeviceType,
|
||
position: res.data.data[index].AlarmName,
|
||
// status: res.data.data[index].AlarmLevel,
|
||
status: res.data.data[index].Status,
|
||
AlarmLevel: res.data.data[index].AlarmLevel,
|
||
};
|
||
});
|
||
});
|
||
},
|
||
//获取mqtt数据
|
||
upmqttData(val) {
|
||
let icon = null;
|
||
var warnListMqtt = [];
|
||
warnListMqtt = Object.keys(val).map((item, index) => {
|
||
if (val[index].Status == 0) {
|
||
val[index].Status = "未处理";
|
||
icon = require("../assets/images/jieNengImg/warnWhite.png");
|
||
} else {
|
||
val[index].Status = "已处理";
|
||
icon = require("../assets/images/jieNengImg/warnBlue.png");
|
||
}
|
||
if (val[index].AlarmLevel == 1) {
|
||
val[index].AlarmLevel = "一级";
|
||
} else if (val[index].AlarmLevel == 2) {
|
||
val[index].AlarmLevel = "二级";
|
||
} else if (val[index].AlarmLevel == 3) {
|
||
val[index].AlarmLevel = "三级";
|
||
}
|
||
return {
|
||
icon: icon,
|
||
time: this.$moment(val[index].AlarmTime).format(
|
||
"YYYY-MM-DD HH:mm:ss"
|
||
),
|
||
position: val[index].AlarmName,
|
||
DeviceType: val[index].DeviceType,
|
||
status: val[index].Status,
|
||
AlarmLevel: val[index].AlarmLevel,
|
||
};
|
||
});
|
||
console.log("warnListMqtt", warnListMqtt);
|
||
for (let i = 0; i < warnListMqtt.length; i++) {
|
||
if (warnListMqtt[i].AlarmLevel == "三级") {
|
||
this.policeList.splice(0, 0, warnListMqtt[i]);
|
||
this.getAlarmCount();
|
||
}
|
||
if (warnListMqtt[i].DeviceType == "消防") {
|
||
this.fireWarnList.splice(0, 0, warnListMqtt[i]);
|
||
}
|
||
}
|
||
},
|
||
},
|
||
components: {},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
@fontsize: 0.9rem;
|
||
.securityMain {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 0.3% 0 0.3%;
|
||
box-sizing: border-box;
|
||
.left {
|
||
width: 24.7%;
|
||
height: 95%;
|
||
padding: 0.5% 0.3% 1% 0.3%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
-webkit-animation-name: leftAnimation;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
-webkit-animation-iteration-count: 1;
|
||
-webkit-animation-duration: 1s;
|
||
.leftOne {
|
||
width: 100%;
|
||
height: 35%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-end;
|
||
align-content: space-between;
|
||
.security {
|
||
height: calc(100% - 25%);
|
||
width: 100%;
|
||
padding-right: 5%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
/deep/ .el-carousel__container {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
/deep/ .el-carousel__indicators--horizontal {
|
||
display: none;
|
||
}
|
||
.securityImg {
|
||
position: absolute;
|
||
left: 10%;
|
||
}
|
||
.securitySupervision {
|
||
width: 50%;
|
||
height: 12%;
|
||
background: url("../assets/images/anFang/securityBack.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: @fontsize;
|
||
margin-left: 50%;
|
||
}
|
||
.securityCount {
|
||
width: 100%;
|
||
height: calc(100% - 12%);
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
.securityList {
|
||
width: 30%;
|
||
height: 20%;
|
||
color: #fff;
|
||
margin-left: 2%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.leftTwo {
|
||
width: 100%;
|
||
height: 65%;
|
||
.warnVideo {
|
||
height: calc(100% - 8%);
|
||
width: 100%;
|
||
padding: 0 3%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
// .warnCamera{
|
||
// width: 100%;
|
||
// height: 40%;
|
||
// border: 3px solid rgb(1, 176, 202);
|
||
// }
|
||
.warnCameraList {
|
||
height: 90%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
@keyframes leftAnimation {
|
||
0% {
|
||
position: relative;
|
||
left: 38%;
|
||
transform: scale(0);
|
||
}
|
||
100% {
|
||
position: relative;
|
||
left: 0%;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
.right {
|
||
width: 24.7%;
|
||
height: 95%;
|
||
padding: 0.5% 0.3% 1% 0.3%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background: url(../assets/images/leftKuang.png) no-repeat;
|
||
background-size: 100% 100%;
|
||
-webkit-animation-name: rightAnimation;
|
||
-webkit-animation-timing-function: ease-in-out;
|
||
-webkit-animation-iteration-count: 1;
|
||
-webkit-animation-duration: 1s;
|
||
.rightOne {
|
||
width: 100%;
|
||
height: 50%;
|
||
.fire {
|
||
height: calc(100% - 10%);
|
||
width: 100%;
|
||
overflow: auto;
|
||
.warnList {
|
||
height: 32%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
// padding-right: 20%;
|
||
padding-right: 5%;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
.rightTwo {
|
||
width: 100%;
|
||
height: 50%;
|
||
.police {
|
||
height: calc(100% - 10%);
|
||
width: 100%;
|
||
overflow: auto;
|
||
.warnList {
|
||
height: 32%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding-right: 20%;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
@keyframes rightAnimation {
|
||
0% {
|
||
position: relative;
|
||
right: 38%;
|
||
transform: scale(0);
|
||
}
|
||
100% {
|
||
position: relative;
|
||
right: 0%;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
width: 100%;
|
||
height: 13%;
|
||
background: url("../assets/images/title.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 12%;
|
||
box-sizing: border-box;
|
||
}
|
||
.caseTitle {
|
||
width: 23%;
|
||
height: 10%;
|
||
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
font-size: 0.9rem;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 5%;
|
||
box-sizing: border-box;
|
||
margin-top: 2%;
|
||
}
|
||
</style> |