1822 lines
50 KiB
Vue
1822 lines
50 KiB
Vue
<template>
|
||
<NAV />
|
||
<!-- 侧边栏显隐-->
|
||
<div class="aside">
|
||
<ul class="aside-ul">
|
||
<li
|
||
class="aside-li"
|
||
:key="index"
|
||
v-for="(item, index) in asideList"
|
||
@click="toggleDevice(item, index)"
|
||
>
|
||
<img
|
||
:src="deviceIndex === index ? item.select : item.default"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
<img
|
||
class="aside-li-msg"
|
||
v-if="deviceIndex === index"
|
||
:src="item.rightImg"
|
||
alt=""
|
||
srcset=""
|
||
/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div id="three3D">
|
||
<Three
|
||
ref="three"
|
||
@openRealPlayer="openRealPlayer"
|
||
@openWebPlayer="openWebPlayer"
|
||
:threeAream="threeAream"
|
||
/>
|
||
</div>
|
||
<div class="container">
|
||
<div class="container-left">
|
||
<div class="container-left-box">
|
||
<!-- 排班表 -->
|
||
<div class="box3">
|
||
<div class="public-title">
|
||
<span class="font">排班表</span>
|
||
<span class="more" @click="goSchedule"> </span>
|
||
</div>
|
||
<div class="schedule">
|
||
<div class="schedule-date">
|
||
<p>
|
||
<i class="drop"></i>
|
||
日期：
|
||
<span
|
||
>{{
|
||
schedule.length != 0
|
||
? getTime("日期", schedule[scheduleIndex].ScheduTime)
|
||
: "无数据"
|
||
}}
|
||
</span>
|
||
</p>
|
||
<p style="margin-left: 2.37rem">
|
||
<i class="drop"></i>
|
||
时间：
|
||
<span>{{
|
||
schedule.length != 0
|
||
? getTime("时间", schedule[scheduleIndex].ScheduTime)
|
||
: "无数据"
|
||
}}</span>
|
||
</p>
|
||
<p>
|
||
<i class="drop"></i>
|
||
星期：
|
||
<span>{{
|
||
schedule.length != 0
|
||
? getTime("星期", schedule[scheduleIndex].ScheduTime)
|
||
: "无数据"
|
||
}}</span>
|
||
</p>
|
||
</div>
|
||
<div class="schedule-person">
|
||
<div class="pre" @click="preClick"></div>
|
||
<div class="next" @click="nextClick"></div>
|
||
<div class="schedule-person-box">
|
||
<div
|
||
:style="'transform:translateX(' + xVal + ')'"
|
||
class="schedule-person-swiper"
|
||
>
|
||
<section
|
||
v-for="(item, index) in schedule"
|
||
:key="index"
|
||
class="schedule-person-item"
|
||
>
|
||
<img :src="previewUrl + item.Pic" alt="" />
|
||
<div>{{ item.Name }}</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 钥匙柜数据 -->
|
||
<div class="box2">
|
||
<div class="public-title">
|
||
<span class="font">钥匙柜状态总览</span>
|
||
<span class="record-icon" @click="openRecord"> </span>
|
||
</div>
|
||
<div class="keyword">
|
||
<ul class="keyword-state">
|
||
<li v-for="(item, index) in keywordState">
|
||
<i :class="'keyword-state-icon' + index"></i>
|
||
<span>{{ item }}</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="keyword-box">
|
||
<section
|
||
v-for="item in keywordList"
|
||
class="keyword-item"
|
||
:key="item.key_name"
|
||
:class="'keyword-item-state' + item.key_status"
|
||
>
|
||
<span>{{ item.key_name }}号锁位</span>
|
||
<span class="position" v-if="item.key_status == 2">被取走</span>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 门禁进入实况-->
|
||
<div class="box5">
|
||
<div class="public-title">
|
||
<span class="font">门禁进入实况</span>
|
||
</div>
|
||
<div class="access-control">
|
||
<el-collapse
|
||
v-model="activeNames"
|
||
accordion
|
||
@change="getDoorHandle"
|
||
>
|
||
<el-collapse-item
|
||
:title="item.doorName"
|
||
:name="item.doorName"
|
||
v-for="(item, index) in doorNames"
|
||
:key="index"
|
||
>
|
||
<el-timeline>
|
||
<el-timeline-item
|
||
v-for="(activity, index) in item.data"
|
||
:key="index"
|
||
>
|
||
<p>{{ activity.no }}</p>
|
||
<p
|
||
v-if="!activity.no"
|
||
class="personMsg"
|
||
style="display: flex; justify-content: space-between"
|
||
>
|
||
<span
|
||
v-if="activity.inAndOutType"
|
||
style="margin-left: 0.5rem"
|
||
>
|
||
{{ activity.personName }}
|
||
<span
|
||
style="
|
||
margin-left: 0.5rem;
|
||
color: rgba(233, 244, 255, 0.6);
|
||
"
|
||
>{{
|
||
activity.inAndOutType == -1
|
||
? "出库房"
|
||
: activity.inAndOutType == 1
|
||
? "进入库房"
|
||
: "未知"
|
||
}}</span
|
||
>
|
||
</span>
|
||
<span
|
||
style="color: rgba(0, 221, 255, 1); font-size: 0.75rem"
|
||
>{{ activity.eventTime }}</span
|
||
>
|
||
</p>
|
||
|
||
<div class="enterImg" v-if="activity.picUri">
|
||
<img
|
||
:src="'https://192.168.17.3:6113' + activity.picUri"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container-right">
|
||
<div class="container-right-box">
|
||
<!-- 报警列表 -->
|
||
<div class="box1">
|
||
<div class="public-title">
|
||
<span class="font">报警列表</span>
|
||
</div>
|
||
<div class="alarmList">
|
||
<!-- 区域入侵报警 -->
|
||
<el-carousel indicator-position="none" :autoplay="false">
|
||
<el-carousel-item
|
||
v-for="(item, index) in alarmList.regional"
|
||
:key="index"
|
||
>
|
||
<section class="regional" @click="openBackPlayer(item)">
|
||
<div class="alarmList-type">区域入侵</div>
|
||
<div class="alarmList-regional">
|
||
<div
|
||
@click.stop="openImg(item)"
|
||
style="
|
||
width: 6.75rem;
|
||
height: 2.75rem;
|
||
display: flex;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<el-image
|
||
style="width: 6.75rem; height: 2.75rem"
|
||
:src="item.imageUrl"
|
||
fit="cover"
|
||
/>
|
||
</div>
|
||
|
||
<div class="alarmList-regional-msg">
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>位置：</span>
|
||
<span>{{ item.address }}</span>
|
||
</div>
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>时间：</span>
|
||
<span>{{ item.date }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<!-- 温湿度报警 -->
|
||
<el-carousel indicator-position="none" :autoplay="false">
|
||
<el-carousel-item
|
||
v-for="(item, index) in alarmList.temperatureAlarm"
|
||
:key="index"
|
||
>
|
||
<section class="humidity">
|
||
<div class="alarmList-type" v-if="item.sensorType == 'temp'">
|
||
温度告警
|
||
</div>
|
||
<div
|
||
class="alarmList-type"
|
||
v-else-if="item.sensorType == 'humidity'"
|
||
>
|
||
湿度告警
|
||
</div>
|
||
<div class="alarmList-content">
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span v-if="item.sensorType == 'temp'">当前温度：</span>
|
||
<span v-else-if="item.sensorType == 'humidity'"
|
||
>当前湿度：</span
|
||
>
|
||
<span
|
||
v-if="item.sensorType == 'temp'"
|
||
class="unit"
|
||
:style="
|
||
item.latestValue >= item.alarmHigh
|
||
? 'color:red'
|
||
: 'color:green'
|
||
"
|
||
>{{ item.latestValue }}℃</span
|
||
>
|
||
<span
|
||
v-else-if="item.sensorType == 'humidity'"
|
||
class="unit"
|
||
:style="
|
||
item.latestValue >= item.alarmHigh
|
||
? 'color:red'
|
||
: 'color:green'
|
||
"
|
||
>{{ item.latestValue }}%</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span v-if="item.sensorType == 'temp'">报警温度：</span>
|
||
<span v-else-if="item.sensorType == 'humidity'"
|
||
>报警湿度：</span
|
||
>
|
||
<span v-if="item.sensorType == 'temp'" class="unit"
|
||
>{{ item.alarmHigh }}℃</span
|
||
>
|
||
<span
|
||
v-else-if="item.sensorType == 'humidity'"
|
||
class="unit"
|
||
>{{ item.alarmHigh }}%</span
|
||
>
|
||
</div>
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>位置：</span>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>时间：</span>
|
||
<span>{{ item.latestTime }}</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<!-- 紧急告警 -->
|
||
<el-carousel indicator-position="none" :autoplay="false">
|
||
<el-carousel-item
|
||
v-for="(item, index) in alarmList.urgent"
|
||
:key="index"
|
||
>
|
||
<section class="urgent">
|
||
<div class="alarmList-type">紧急告警</div>
|
||
<div class="alarmList-content">
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>报警IP：</span>
|
||
<span>{{ item.AlarmAddress }}</span>
|
||
</div>
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>报警状态：</span>
|
||
<span style="color: red">{{ item.AlarmContent }}</span>
|
||
</div>
|
||
<div class="ellipsis">
|
||
<i class="drop"></i>
|
||
<span>位置：</span>
|
||
<el-tooltip
|
||
class="item"
|
||
effect="dark"
|
||
:content="item.AlarmName"
|
||
placement="top-start"
|
||
>
|
||
<span>{{ item.AlarmName }}</span>
|
||
</el-tooltip>
|
||
<!-- <span>{{ item.AlarmName }}</span> -->
|
||
</div>
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>时间：</span>
|
||
<span>{{ item.AlarmTime }}</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<!-- 烟感报警 -->
|
||
<el-carousel indicator-position="none" :autoplay="false">
|
||
<el-carousel-item
|
||
v-for="(item, index) in smokeDevice"
|
||
:key="index"
|
||
>
|
||
<section class="urgent">
|
||
<div class="alarmList-type">烟感告警</div>
|
||
<div class="alarmList-content">
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span>{{ item.name }}</span>
|
||
</div>
|
||
<div>
|
||
<i class="drop"></i>
|
||
<span
|
||
:style="item.state == 1 ? 'color:red' : 'color:green'"
|
||
>{{ item.state == 1 ? "报警" : "正常" }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 巡更线监控 -->
|
||
<div class="box4">
|
||
<div class="public-title">
|
||
<span class="font">巡更线监控</span>
|
||
</div>
|
||
<div class="patrol-line">
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%"
|
||
stripe
|
||
:row-class-name="getRowColor"
|
||
>
|
||
<el-table-column
|
||
prop="position"
|
||
min-width="25%"
|
||
label="巡更点"
|
||
show-overflow-tooltip
|
||
/>
|
||
<el-table-column prop="state" min-width="25%" label="巡更状态">
|
||
<template #default="scope">
|
||
<div>
|
||
<p>
|
||
<i
|
||
class="qiu-icon"
|
||
:style="'background-color:' + getColor(scope.row.state)"
|
||
></i
|
||
>{{ fontState[parseInt(scope.row.state)] }}
|
||
</p>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="history"
|
||
min-width="55%"
|
||
label="打卡记录"
|
||
show-overflow-tooltip
|
||
/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 监控画面 -->
|
||
<!-- <div class="box4">
|
||
<div class="public-title">
|
||
<span class="font">监控画面</span>
|
||
</div>
|
||
<div class="camera">
|
||
<div class="camera-box">
|
||
<iframe
|
||
id="webPlayer"
|
||
src="player/webPlayer.html"
|
||
frameborder="0"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 底部-->
|
||
<div class="footer">
|
||
<ul class="footer-ul">
|
||
<li
|
||
class="footer-ul-li"
|
||
v-for="(item, index) in footerList"
|
||
:key="index"
|
||
@click="toggleOpen(item, index)"
|
||
>
|
||
<img :src="footerIndex !== index ? item.default : item.select" alt="" />
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 底部点击弹框 -->
|
||
<Dialog @close="closeHandle" :title="dialogName" v-if="dialogShow" />
|
||
<!-- 播放器弹窗 -->
|
||
<Player
|
||
@close="closePlayer"
|
||
:title="playerName"
|
||
:videoList="videoList"
|
||
:img="alarmImg"
|
||
v-if="playerShow"
|
||
/>
|
||
<!-- 运维状况 -->
|
||
<!-- <div class="iframeBox">
|
||
<iframe
|
||
ref="iframeChart"
|
||
id="iframeChart"
|
||
src='https://192.168.17.3:443/xauthplus-plugin/thirdLogin?type=third&service=https://192.168.17.3:443/nms/views/home'
|
||
frameborder="0"
|
||
></iframe>
|
||
</div> -->
|
||
|
||
<!-- 陌生人报警 -->
|
||
<Linkage v-if="linkageShow" @open="openLinkage" @close="closeLinkage" />
|
||
<!-- 取还记录 -->
|
||
<Record v-if="recordShow" @close="closeRecord" />
|
||
</template>
|
||
<script setup>
|
||
import { v4 as uuidv4 } from "uuid";
|
||
import getPath from "@/utils/getPath.js";
|
||
import Three from "@/components/Three.vue";
|
||
import { ref, onMounted, reactive, nextTick, watch, onUnmounted } from "vue";
|
||
import cameraUrl from "@/assets/images/camera.png";
|
||
import NAV from "@/components/nav.vue";
|
||
import Dialog from "@/components/dialog.vue";
|
||
import Player from "@/components/player.vue";
|
||
import Linkage from "@/components/linkage.vue";
|
||
import moment from "moment";
|
||
import {
|
||
getHikvision,
|
||
getScheduleList,
|
||
getToken,
|
||
getEmergencyApi,
|
||
getKeywordMsg,
|
||
} from "@/api/index";
|
||
import { getTime } from "@/utils/tool.js";
|
||
import Record from "@/components/record.vue";
|
||
import { useRouter } from "vue-router";
|
||
const uuid = uuidv4();
|
||
const router = useRouter();
|
||
// 侧边栏
|
||
const asideList = ref([
|
||
{
|
||
default: getPath.store,
|
||
select: getPath.storeSelect,
|
||
rightImg: getPath.storePrompt,
|
||
title: "仓库",
|
||
},
|
||
{
|
||
default: getPath.monitorPoint,
|
||
select: getPath.monitorPointSelect,
|
||
rightImg: getPath.monitorPointPrompt,
|
||
title: "监控点",
|
||
},
|
||
{
|
||
default: getPath.alarmHost,
|
||
select: getPath.alarmHostSelect,
|
||
rightImg: getPath.alarmHostPrompt,
|
||
title: "报警主机",
|
||
},
|
||
// {
|
||
// default: getPath.water,
|
||
// select: getPath.waterSelect,
|
||
// rightImg: getPath.waterPrompt,
|
||
// title: "水浸探测器",
|
||
// },
|
||
{
|
||
default: getPath.smoke,
|
||
select: getPath.smokeSelect,
|
||
rightImg: getPath.smokePrompt,
|
||
title: "烟感探测器",
|
||
},
|
||
{
|
||
default: getPath.humidity,
|
||
select: getPath.humiditySelect,
|
||
rightImg: getPath.humidityPrompt,
|
||
title: "温湿度探测器",
|
||
},
|
||
{
|
||
default: getPath.accessControl,
|
||
select: getPath.accessControlSelect,
|
||
rightImg: getPath.accessControlPrompt,
|
||
title: "人脸门禁一体机",
|
||
},
|
||
]);
|
||
// 底部栏
|
||
const footerIndex = ref(-1);
|
||
const footerList = ref([
|
||
{
|
||
title: "温湿度记录",
|
||
default: getPath.record,
|
||
select: getPath.recordSelect,
|
||
},
|
||
{ title: "枪支离位报警", default: getPath.guns, select: getPath.gunsSelect },
|
||
{
|
||
title: "视频监控",
|
||
default: getPath.monitor,
|
||
select: getPath.monitorSelect,
|
||
},
|
||
{
|
||
title: "运维状况",
|
||
default: getPath.operation,
|
||
select: getPath.operationSelect,
|
||
},
|
||
{
|
||
default: getPath.shipin,
|
||
select: getPath.shipinSelect,
|
||
title: "视频回放",
|
||
},
|
||
]);
|
||
const dialogName = ref("");
|
||
// 运维状况控制隐藏
|
||
const iframeShow = ref(false);
|
||
const iframeChart = ref(null);
|
||
async function toggleOpen(item, index) {
|
||
dialogName.value = item.title;
|
||
playerName.value = item.title;
|
||
footerIndex.value = index;
|
||
// const token = await getToken();
|
||
const token = sessionStorage.getItem("token");
|
||
if (item.title === "枪支离位报警") {
|
||
window.location.assign("qiangzhi://");
|
||
} else if (item.title === "运维状况") {
|
||
location.href =
|
||
"https://192.168.17.3:443/xauthplus-plugin/thirdLogin?type=third&service=https://192.168.17.3:443/nms/views/home&token=" +
|
||
token;
|
||
} else if (item.title === "温湿度记录") {
|
||
location.href =
|
||
"https://192.168.17.3:443/xauthplus-plugin/thirdLogin?type=third&service=https://192.168.17.3:443/pems/environment-monitor&token=" +
|
||
token;
|
||
} else {
|
||
dialogShow.value = true;
|
||
}
|
||
}
|
||
|
||
// 报警列表
|
||
const alarmList = ref({
|
||
regional: [],
|
||
temperatureAlarm: [],
|
||
humidity: [],
|
||
urgent: [],
|
||
});
|
||
|
||
// 3d模型区域入侵报警数据
|
||
const threeAream = reactive({});
|
||
// 钥匙柜
|
||
const keywordState = ref(["在位", "不在位"]);
|
||
// 钥匙柜
|
||
const keywordList = ref([
|
||
{
|
||
keyCapturing: "1",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "2",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "3",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "4",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "5",
|
||
keyState: "0",
|
||
position: "李柳柳取走",
|
||
},
|
||
{
|
||
keyCapturing: "6",
|
||
keyState: "0",
|
||
position: "李柳柳取走",
|
||
},
|
||
{
|
||
keyCapturing: "7",
|
||
keyState: "0",
|
||
position: "李柳柳取走",
|
||
},
|
||
{
|
||
keyCapturing: "8",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "9",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "10",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "11",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "12",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "13",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "14",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "15",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "16",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "17",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "18",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "19",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "20",
|
||
keyState: "0",
|
||
position: "李柳柳取走",
|
||
},
|
||
{
|
||
keyCapturing: "21",
|
||
keyState: "0",
|
||
position: "李柳柳取走",
|
||
},
|
||
{
|
||
keyCapturing: "22",
|
||
keyState: "0",
|
||
position: "李柳柳取走",
|
||
},
|
||
{
|
||
keyCapturing: "23",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "24",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "25",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "26",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "27",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "28",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "29",
|
||
keyState: "1",
|
||
},
|
||
{
|
||
keyCapturing: "30",
|
||
keyState: "1",
|
||
},
|
||
]);
|
||
const recordShow = ref(false);
|
||
function openRecord() {
|
||
// hidePlay();
|
||
recordShow.value = true;
|
||
}
|
||
function closeRecord(bool) {
|
||
// openPlay();
|
||
recordShow.value = bool;
|
||
}
|
||
// 门禁进入实况
|
||
const activeNames = ref([]);
|
||
const doorNames = ref([]);
|
||
// 排班表
|
||
const schedule = ref([{}, {}, {}]);
|
||
const scheduleIndex = ref(0);
|
||
const xVal = ref(0);
|
||
const previewUrl = ref(import.meta.env.VITE_PREVIEW_URL);
|
||
// 获取排班表
|
||
function getScheduleData() {
|
||
if (handleTimer.timer4) {
|
||
clearTimeout(handleTimer.timer4);
|
||
}
|
||
var getScheduleTime = {
|
||
StartTime: moment(new Date().setHours(0, 0, 0, 0)).format(
|
||
"yyyy-MM-DD HH:mm:ss"
|
||
),
|
||
EndTime: moment(
|
||
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 2
|
||
).format("yyyy-MM-DD HH:mm:ss"),
|
||
};
|
||
// 获取排班表数据
|
||
getScheduleList(getScheduleTime).then((res) => {
|
||
if (res.state == "Success") {
|
||
// let date = moment(new Date()).format("YYYY-MM-DD");
|
||
// let arr = res.data.ds.filter((ele) => {
|
||
// return moment(ele.ScheduTime).format("YYYY-MM-DD") == date;
|
||
// });
|
||
schedule.value = res.data.ds.sort((a, b) => {
|
||
return moment(a.ScheduTime).unix() - moment(b.ScheduTime).unix();
|
||
});
|
||
}
|
||
handleTimer.timer4 = setTimeout(() => {
|
||
getScheduleData();
|
||
}, 7000);
|
||
});
|
||
}
|
||
|
||
const keywordTimer = ref(null);
|
||
// 获取钥匙状态
|
||
function getKeywordData() {
|
||
if (keywordTimer.value) {
|
||
clearTimeout(keywordTimer);
|
||
}
|
||
let data = {
|
||
id: "112323",
|
||
};
|
||
getKeywordMsg(data).then((res) => {
|
||
keywordList.value = res.data.list;
|
||
keywordTimer.value = setTimeout(() => {
|
||
getKeywordData();
|
||
}, 10000);
|
||
});
|
||
}
|
||
// 上一页
|
||
function preClick() {
|
||
scheduleIndex.value--;
|
||
if (scheduleIndex.value < 0) {
|
||
// scheduleIndex.value = schedule.value.length - 1;
|
||
return;
|
||
}
|
||
xVal.value = -(100 / 3) * scheduleIndex.value + "%";
|
||
}
|
||
// 下一页
|
||
function nextClick() {
|
||
scheduleIndex.value++;
|
||
if (scheduleIndex.value === schedule.value.length) {
|
||
return;
|
||
}
|
||
xVal.value = -(100 / 3) * scheduleIndex.value + "%";
|
||
}
|
||
// 定时器
|
||
const handleTimer = reactive({
|
||
timer1: null,
|
||
timer2: null,
|
||
timer3: null,
|
||
timer4: null,
|
||
timer5: null,
|
||
});
|
||
onUnmounted(() => {
|
||
// 清除定时器
|
||
clearTimeout(handleTimer.timer1);
|
||
clearTimeout(handleTimer.timer2);
|
||
clearTimeout(handleTimer.timer3);
|
||
clearTimeout(handleTimer.timer4);
|
||
clearTimeout(handleTimer.timer5);
|
||
if (keywordTimer.value) {
|
||
clearTimeout(keywordTimer);
|
||
}
|
||
if (patrolTimer.value) {
|
||
clearTimeout(patrolTimer.value);
|
||
}
|
||
if (smokeTimer.value) {
|
||
clearTimeout(smokeTimer.value);
|
||
}
|
||
});
|
||
// 获取区域入侵数据
|
||
function getRegionData() {
|
||
if (handleTimer.timer1) {
|
||
clearTimeout(handleTimer.timer1);
|
||
}
|
||
const historyDay = reactive({
|
||
startStamp: moment(
|
||
new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000 * 30
|
||
).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
|
||
endStamp: moment(
|
||
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
|
||
).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
|
||
});
|
||
getHikvision({
|
||
path: "/artemis/api/els/v1/events/search",
|
||
data: {
|
||
ability: "event_vss",
|
||
pageSize: 500,
|
||
pageNo: 1,
|
||
startTime: historyDay.startStamp,
|
||
endTime: historyDay.endStamp,
|
||
},
|
||
}).then((res) => {
|
||
if (res.code == 0) {
|
||
// 3d模型区域入侵报警数据
|
||
threeAream.address = res.result.data.list[0].eventLogSrcList[0].resName;
|
||
threeAream.date = res.result.data.list[0].startTime;
|
||
alarmList.value.regional = res.result.data.list.map((ele) => {
|
||
return {
|
||
title: ele.eventTypeName,
|
||
address: ele.eventLogSrcList[0].resName,
|
||
date: ele.startTime,
|
||
imageUrl: JSON.parse(ele.eventLogSrcList[0].data).fielddetection
|
||
? JSON.parse(ele.eventLogSrcList[0].data).fielddetection[0].imageUrl
|
||
: JSON.parse(ele.eventLogSrcList[0].data).smokeDetection
|
||
? JSON.parse(ele.eventLogSrcList[0].data).smokeDetection[0].imageUrl
|
||
: null,
|
||
cameraIndex: JSON.parse(ele.eventLogSrcList[0].data).fielddetection
|
||
? JSON.parse(ele.eventLogSrcList[0].data).fielddetection[0]
|
||
.targetAttrs.cameraIndexCode
|
||
: JSON.parse(ele.eventLogSrcList[0].data).smokeDetection
|
||
? JSON.parse(ele.eventLogSrcList[0].data).smokeDetection[0]
|
||
.targetAttrs.cameraIndexCode
|
||
: null,
|
||
startTime: ele.startTime,
|
||
endTime: ele.endTime,
|
||
handleStatus: ele.handleStatus,
|
||
};
|
||
});
|
||
}
|
||
handleTimer.timer1 = setTimeout(() => {
|
||
getRegionData();
|
||
}, 10000);
|
||
});
|
||
}
|
||
// 获取动环数据
|
||
function getRotatingData() {
|
||
if (handleTimer.timer2) {
|
||
clearTimeout(handleTimer.timer2);
|
||
}
|
||
// 分页查询动环传感器
|
||
getHikvision({
|
||
path: "/artemis/api/pems/v1/monitor/search",
|
||
data: {
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
isIncludeSonRegion: true,
|
||
},
|
||
}).then((res) => {
|
||
if (res.code == 0) {
|
||
// console.log(res, "分页查询");
|
||
var AlarmNames = [];
|
||
// temperatureAlarm.value = [];
|
||
if (alarmList.value.temperatureAlarm.length > 0) {
|
||
AlarmNames = alarmList.value.temperatureAlarm.map((item) => {
|
||
return item.name;
|
||
});
|
||
}
|
||
|
||
for (let i = 0; i < res.result.data.list.length; i++) {
|
||
getHikvision({
|
||
path: "/artemis/api/pems/v1/sensor/search",
|
||
data: {
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
parentIndexCode: res.result.data.list[i].indexCode,
|
||
},
|
||
}).then((data) => {
|
||
if ((data.code = 200)) {
|
||
for (let j = 0; j < data.result.data.list.length; j++) {
|
||
if (
|
||
data.result.data.list[j].sensorType == "humidity" ||
|
||
data.result.data.list[j].sensorType == "temp"
|
||
) {
|
||
if (AlarmNames.indexOf(data.result.data.list[j].name) == -1) {
|
||
alarmList.value.temperatureAlarm.push(
|
||
data.result.data.list[j]
|
||
);
|
||
} else {
|
||
// temperatureAlarm.value.replace()
|
||
}
|
||
}
|
||
}
|
||
handleTimer.timer2 = setTimeout(() => {
|
||
getRotatingData();
|
||
}, 10000);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// 获取紧急报警数据
|
||
function getEmergencyData() {
|
||
if (handleTimer.timer3) {
|
||
clearTimeout(handleTimer.timer3);
|
||
}
|
||
var emergencyTime = {
|
||
StartTime: moment(
|
||
new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000 * 30
|
||
).format("yyyy-MM-DD HH:mm:ss"),
|
||
EndTime: moment(
|
||
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
|
||
).format("yyyy-MM-DD HH:mm:ss"),
|
||
};
|
||
getEmergencyApi(emergencyTime).then((res) => {
|
||
if (res.code == 0) {
|
||
alarmList.value.urgent = res.data.sort((a, b) => {
|
||
return moment(b.AlarmTime).unix() - moment(a.AlarmTime).unix();
|
||
});
|
||
// console.log(alarmList.value.urgent,'报警数据xxxx');
|
||
handleTimer.timer3 = setTimeout(() => {
|
||
getEmergencyData();
|
||
}, 10000);
|
||
}
|
||
});
|
||
}
|
||
// 获取门禁列表
|
||
function getDoorList() {
|
||
let doorData = {
|
||
path: "/artemis/api/resource/v1/acsDoor/acsDoorList",
|
||
data: {
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
},
|
||
};
|
||
getHikvision(doorData).then((res) => {
|
||
if (res.code == 0) {
|
||
res.result.data.list.forEach((ele) => {
|
||
doorNames.value.push({ doorName: ele.doorName, data: [] });
|
||
});
|
||
}
|
||
});
|
||
}
|
||
// 获取门禁事件
|
||
// 将标准实践格式转化为ios8601
|
||
const steamp = reactive({
|
||
startStamp: moment(new Date().setHours(0, 0, 0, 0)).format(
|
||
"YYYY-MM-DDTHH:mm:ss.SSSZ"
|
||
),
|
||
endStamp: moment(
|
||
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
|
||
).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
|
||
});
|
||
// 实时更新
|
||
setInterval(() => {
|
||
(steamp.startStamp = moment(new Date().setHours(0, 0, 0, 0)).format(
|
||
"YYYY-MM-DDTHH:mm:ss.SSSZ"
|
||
)),
|
||
(steamp.endStamp = moment(
|
||
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
|
||
).format("YYYY-MM-DDTHH:mm:ss.SSSZ"));
|
||
}, 1000);
|
||
|
||
// 获取门禁事件数据
|
||
function getDoorHandle(event) {
|
||
let doorParams = {
|
||
path: "/artemis/api/acs/v2/door/events",
|
||
data: {
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
startTime: steamp.startStamp,
|
||
endTime: steamp.endStamp,
|
||
receiveStartTime: steamp.startStamp,
|
||
receiveEndTime: steamp.endStamp,
|
||
doorName: "",
|
||
order: "desc",
|
||
},
|
||
};
|
||
// 默认清除
|
||
doorParams.data.doorName = event;
|
||
getHikvision(doorParams).then((res) => {
|
||
if (res.code == 0) {
|
||
doorNames.value.forEach((el) => {
|
||
if (el.doorName === event) {
|
||
if (!res.result.data.list.length) {
|
||
el.data.push({ no: "无数据" });
|
||
} else {
|
||
el.data = res.result.data.list;
|
||
}
|
||
} else {
|
||
el.data = [];
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
// dom挂载后
|
||
onMounted(() => {
|
||
getDoorList();
|
||
getScheduleData();
|
||
// 获取入侵数据
|
||
getRegionData();
|
||
// 动环数据
|
||
getRotatingData();
|
||
// 紧急报警数据
|
||
getEmergencyData();
|
||
// 巡更
|
||
getPatrolData();
|
||
// 烟感
|
||
getSomkeData();
|
||
// 钥匙柜数据
|
||
getKeywordData();
|
||
let token = sessionStorage.getItem("token");
|
||
if (!token) {
|
||
alert("登录过期，请重新登录");
|
||
router.push("/login");
|
||
}
|
||
});
|
||
// 巡更线
|
||
const tableData = ref([
|
||
// {
|
||
// position: "巡更点1",
|
||
// state: "1",
|
||
// history: "刘七七 2020/06/08 14:27:11",
|
||
// },
|
||
]);
|
||
|
||
// 状态文字
|
||
const fontState = ref(["准时", "早巡", "晚巡", "补漏巡", "漏巡"]);
|
||
// 获取状态颜色
|
||
function getColor(state) {
|
||
if (state == 1 || state == 2) {
|
||
return "#f05657";
|
||
} else if (state == 4 || state == 3) {
|
||
return "#FFBF00";
|
||
} else if (state == 0) {
|
||
return "#52e76f";
|
||
}
|
||
}
|
||
// 弹窗的显影
|
||
const dialogShow = ref(false);
|
||
function closeHandle(e) {
|
||
// openPlay();
|
||
footerIndex.value = -1;
|
||
dialogShow.value = false;
|
||
}
|
||
const deviceIndex = ref(0);
|
||
|
||
const three = ref(null);
|
||
// 侧边栏点击事件控制three中设备显隐
|
||
function toggleDevice(item, index) {
|
||
deviceIndex.value = index;
|
||
if (three.value) {
|
||
three.value.clearLabelObj(item.title);
|
||
}
|
||
}
|
||
// 跳转排班表后台
|
||
function goSchedule() {
|
||
location.href =
|
||
import.meta.env.VITE_PREVIEW_URL + "/Management/Home.aspx?Id=1";
|
||
}
|
||
|
||
// 关闭播放器弹窗
|
||
const playerShow = ref(false);
|
||
function closePlayer() {
|
||
// openPlay();
|
||
playerShow.value = false;
|
||
}
|
||
const videoList = ref("");
|
||
const playerName = ref("实时视频");
|
||
// 打开播放器弹窗
|
||
function openRealPlayer(event, cameraIndexCode) {
|
||
// hidePlay();
|
||
playerShow.value = event;
|
||
videoList.value = { indexCode: cameraIndexCode };
|
||
playerName.value = "实时视频";
|
||
}
|
||
const alarmImg = ref("");
|
||
function openImg(item) {
|
||
playerName.value = "图片预览";
|
||
playerShow.value = true;
|
||
alarmImg.value = item.imageUrl;
|
||
videoList.value = false;
|
||
}
|
||
// 打开回放播放器
|
||
function openBackPlayer(item) {
|
||
playerShow.value = true;
|
||
videoList.value = `${item.cameraIndex},${new Date(
|
||
item.startTime.replace("-", "/").replace("-", "/")
|
||
).getTime()},${new Date(
|
||
item.endTime.replace("-", "/").replace("-", "/")
|
||
).getTime()}`;
|
||
playerName.value = "回放视频";
|
||
}
|
||
// 获取登录凭证
|
||
async function getTokenData(service, name) {
|
||
const res = await getToken({
|
||
language: "zh_CN",
|
||
service: service,
|
||
userCode: name,
|
||
});
|
||
// iframeShow.value = true;
|
||
nextTick(() => {
|
||
// iframeChart.value.src = `https://192.168.17.3/bic/ssoService/v1/tokenLogin?token=${res.result.data.token}&service=${service}`
|
||
// console.log(iframeChart.contentWindow);
|
||
// iframeChart.outerHTML = iframeChart.outerHTML;
|
||
// console.log(iframeChart.value,'xxxxxxxxxxxxx');
|
||
location.href = `https://192.168.17.3/bic/ssoService/v1/tokenLogin?token=${res.result.data.token}&service=${service}`;
|
||
});
|
||
}
|
||
const linkageShow = ref(true);
|
||
// 关闭陌生人弹窗
|
||
function closeLinkage(event) {
|
||
// openPlay();
|
||
linkageShow.value = event;
|
||
}
|
||
// 打开陌生人弹窗
|
||
function openLinage(event) {
|
||
// hidePlay();
|
||
linkageShow.value = event;
|
||
}
|
||
const webIndex = ref(0);
|
||
const webTimer = ref(null);
|
||
// 打开监控画面
|
||
function openWebPlayer(data) {
|
||
nextTick(() => {
|
||
let webPlayer = document.querySelector("#webPlayer");
|
||
if (webPlayer.contentWindow.oWebControl) {
|
||
webPlayer.contentWindow.startPlay(data[webIndex.value].cameraIndexCode);
|
||
}
|
||
if (webTimer.value) {
|
||
clearInterval(webTimer.value);
|
||
}
|
||
if (webIndex.value === 0) {
|
||
setTimeout(() => {
|
||
webPlayer.contentWindow.startPlay(data[webIndex.value].cameraIndexCode);
|
||
}, 4000);
|
||
}
|
||
webTimer.value = setInterval(() => {
|
||
if (data.length == webIndex.value) {
|
||
winIndex.value = 0;
|
||
}
|
||
webPlayer.contentWindow.startPlay(data[webIndex.value].cameraIndexCode);
|
||
webIndex.value++;
|
||
}, 10000);
|
||
});
|
||
}
|
||
// function hidePlay() {
|
||
// let webPlayer = document.querySelector("#webPlayer");
|
||
// if (webPlayer.contentWindow.oWebControl) {
|
||
// webPlayer.contentWindow.oWebControl.JS_HideWnd();
|
||
// }
|
||
// }
|
||
// function openPlay() {
|
||
// let webPlayer = document.querySelector("#webPlayer");
|
||
// if (webPlayer.contentWindow.oWebControl) {
|
||
// webPlayer.contentWindow.oWebControl.JS_ShowWnd();
|
||
// }
|
||
// }
|
||
const patrolTimer = ref(null);
|
||
// 获取巡更信息
|
||
function getPatrolData() {
|
||
if (patrolTimer.value) {
|
||
clearTimeout(patrolTimer.value);
|
||
}
|
||
// 巡更数据接口请求
|
||
getHikvision({
|
||
path: "/artemis/api/gtps/v1/patrolHistory/records",
|
||
data: {
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
beginTime: moment(
|
||
new Date().setHours(0, 0, 0, 0) - 24 * 60 * 60 * 1000
|
||
).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
|
||
endTime: moment(
|
||
new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1
|
||
).format("YYYY-MM-DDTHH:mm:ss.SSSZ"),
|
||
},
|
||
}).then((res) => {
|
||
var scheduleIdList = [];
|
||
for (let i = 0; i < res.result.data.rows.length; i++) {
|
||
scheduleIdList.push(res.result.data.rows[i].scheduleId);
|
||
}
|
||
getHikvision({
|
||
path: "/artemis/api/gtps/v1/historyDetailInfo/records",
|
||
data: {
|
||
scheduleIdList: scheduleIdList,
|
||
},
|
||
}).then((data) => {
|
||
tableData.value = data.result.data.map((ele) => {
|
||
return {
|
||
position: ele.pointDetailHistoryList[0].pointName,
|
||
history:
|
||
ele.routeInfo.personName +
|
||
" " +
|
||
ele.pointDetailHistoryList[0].pointBeginTimeISO,
|
||
state: ele.routeInfo.routeResult,
|
||
};
|
||
});
|
||
|
||
setTimeout(() => {
|
||
getPatrolData();
|
||
}, 10000);
|
||
});
|
||
});
|
||
}
|
||
const smokeDevice = ref([]);
|
||
const smokeTimer = ref(null);
|
||
// 获取烟感传感器数据
|
||
function getSomkeData() {
|
||
if (smokeTimer.value) {
|
||
clearTimeout(smokeTimer.value);
|
||
}
|
||
// 烟感的报警输入
|
||
getHikvision({
|
||
path: "/artemis/api/pems/v1/alarm_in/search",
|
||
data: {
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
isIncludeSonRegion: true,
|
||
},
|
||
}).then((res) => {
|
||
smokeDevice.value = res.result.data.list;
|
||
setTimeout(() => {
|
||
getSomkeData();
|
||
}, 10000);
|
||
});
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
//门禁进入实况
|
||
.access-control {
|
||
padding: vh(16) vw(16);
|
||
box-sizing: border-box;
|
||
height: vh(256);
|
||
overflow-y: scroll;
|
||
}
|
||
.access-control::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.ellipsis {
|
||
white-space: nowrap; /* 确保文本在一行内显示 */
|
||
overflow: hidden; /* 隐藏超出容器的文本 */
|
||
text-overflow: ellipsis; /* 使用省略符号表示文本被截断 */
|
||
}
|
||
.personMsg {
|
||
background-image: url("@/assets/images/personMsg.png");
|
||
background-size: 100% 100%;
|
||
height: vh(26);
|
||
}
|
||
// 视频画面
|
||
.camera {
|
||
box-sizing: border-box;
|
||
padding: vh(16) vw(16);
|
||
margin-bottom: vh(20);
|
||
}
|
||
.camera-box {
|
||
width: vw(380);
|
||
height: vh(238);
|
||
position: relative;
|
||
background-size: 100% 100%;
|
||
background-image: url("@/assets/images/camera-box.png");
|
||
iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
// margin: vh(16) 0 vh(20) 0;
|
||
}
|
||
.iframeBox {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99999;
|
||
iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.enterImg img {
|
||
width: vw(64);
|
||
height: vh(64);
|
||
}
|
||
.aside {
|
||
//height: vh(380);
|
||
width: vw(44);
|
||
position: fixed;
|
||
bottom: vh(125);
|
||
left: vw(486);
|
||
z-index: 99;
|
||
&-li {
|
||
width: 100%;
|
||
position: relative;
|
||
margin-bottom: 0.6rem;
|
||
&-msg {
|
||
position: absolute;
|
||
left: 107%;
|
||
top: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
&-left,
|
||
&-right {
|
||
padding-top: vw(60);
|
||
width: vw(412);
|
||
z-index: 999;
|
||
height: 100%;
|
||
position: relative;
|
||
&-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
//标题
|
||
.public-title,
|
||
.access-title {
|
||
height: vh(40);
|
||
width: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-left: 3.5rem;
|
||
padding-right: 1rem;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
background-image: url("@/assets/images/title-box.png");
|
||
span:nth-child(1) {
|
||
font-family: pangmen;
|
||
font-size: 1.625rem;
|
||
}
|
||
.more,
|
||
.record-icon {
|
||
background-image: url("@/assets/images/checkMore.png");
|
||
cursor: pointer;
|
||
background-size: 100% 100%;
|
||
width: 4.25rem;
|
||
height: 1.5rem;
|
||
}
|
||
.record-icon {
|
||
background-image: url("@/assets/images/record-icon.png");
|
||
}
|
||
}
|
||
.access-title {
|
||
margin-top: 0.5rem;
|
||
background-image: url("@/assets/images/door-title.png");
|
||
}
|
||
&-left {
|
||
background-image: url("@/assets/images/left-mask.png");
|
||
padding-left: 3.5rem;
|
||
background-size: 100% 100%;
|
||
|
||
.schedule {
|
||
padding: vh(16) vw(16);
|
||
box-sizing: border-box;
|
||
margin-bottom: vh(20);
|
||
}
|
||
.schedule-date {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-between;
|
||
padding: 0.6rem 0.8rem;
|
||
box-sizing: border-box;
|
||
background-image: url("@/assets/images/schedule-date.png");
|
||
width: 100%;
|
||
height: vh(80);
|
||
margin-bottom: vh(16);
|
||
}
|
||
.schedule-person {
|
||
position: relative;
|
||
width: 100%;
|
||
|
||
box-sizing: border-box;
|
||
padding: 0 vw(18);
|
||
&-box {
|
||
position: relative;
|
||
width: 100%;
|
||
height: vh(160);
|
||
overflow: hidden;
|
||
}
|
||
&-swiper {
|
||
transition: all 0.8s ease-in-out;
|
||
display: flex;
|
||
}
|
||
// margin-bottom: vh(15);
|
||
// box-sizing: border-box;
|
||
&-item {
|
||
padding-top: vh(6);
|
||
box-sizing: border-box;
|
||
width: vw(108);
|
||
height: 100%;
|
||
background-image: url("@/assets/images/schedule-person.png");
|
||
background-size: 100% 100%;
|
||
text-align: center;
|
||
margin-right: vw(9);
|
||
}
|
||
&-item:nth-child(3n) {
|
||
// margin-right:0 !important;
|
||
}
|
||
// justify-content: space-between;
|
||
|
||
img {
|
||
width: vw(108);
|
||
height: vh(116);
|
||
}
|
||
}
|
||
// &-item:nth-child(3n) {
|
||
// margin-right: 0;
|
||
// }
|
||
.pre,
|
||
.next {
|
||
position: absolute;
|
||
top: 40%;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
width: vw(20);
|
||
height: vh(20);
|
||
}
|
||
.pre {
|
||
left: vw(-10);
|
||
background-image: url("@/assets/images/pre.png");
|
||
}
|
||
.next {
|
||
right: vw(-10);
|
||
background-image: url("@/assets/images/next.png");
|
||
}
|
||
|
||
.keyword::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
// 钥匙柜
|
||
.keyword {
|
||
width: 100%;
|
||
padding: 0 vw(16);
|
||
box-sizing: border-box;
|
||
&-state {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
font-size: 0.75rem;
|
||
margin: 1rem 0;
|
||
&-icon0,
|
||
&-icon1 {
|
||
width: 0.875rem;
|
||
height: 0.875rem;
|
||
background-size: 100% 100%;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
margin-right: 0.5rem;
|
||
}
|
||
&-icon0 {
|
||
background-image: url("@/assets/images/has.png");
|
||
}
|
||
&-icon0 + span {
|
||
color: rgba(0, 220, 183, 1);
|
||
}
|
||
&-icon1 + span {
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
&-icon1 {
|
||
margin-left: 2rem;
|
||
background-image: url("@/assets/images/noHas.png");
|
||
}
|
||
}
|
||
&-box {
|
||
height: vh(180);
|
||
overflow: scroll;
|
||
}
|
||
&-box::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
&-item {
|
||
float: left;
|
||
width: vw(88);
|
||
font-size: 0.75rem;
|
||
height: vh(52);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0.5rem;
|
||
box-sizing: border-box;
|
||
justify-content: flex-end;
|
||
margin-bottom: 0.5rem;
|
||
background-image: url("@/assets/images/has-bg.png");
|
||
background-size: 100% 100%;
|
||
margin-right: vw(9);
|
||
position: relative;
|
||
.position {
|
||
top: 0;
|
||
position: absolute;
|
||
left: 50%;
|
||
white-space: nowrap;
|
||
font-size: 0.625rem;
|
||
transform: translate(-50%);
|
||
}
|
||
&-state1 {
|
||
background-image: url("@/assets/images/has-bg.png");
|
||
color: rgba(0, 237, 197, 1);
|
||
}
|
||
&-state2 {
|
||
color: rgba(255, 255, 255, 1);
|
||
background-image: url("@/assets/images/noHas-bg.png");
|
||
}
|
||
}
|
||
&-item:nth-of-type(4n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-right {
|
||
background-image: url("@/assets/images/right-mask.png");
|
||
padding-right: 3.5rem;
|
||
background-size: 100% 100%;
|
||
.alarmList::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
//报警列表
|
||
.alarmList {
|
||
width: 100%;
|
||
height: vh(500);
|
||
padding: vh(16) vw(16);
|
||
box-sizing: border-box;
|
||
overflow: scroll;
|
||
flex-wrap: wrap;
|
||
align-content: space-evenly;
|
||
&-type {
|
||
padding-top: 0.75rem;
|
||
padding-left: 1.3rem;
|
||
box-sizing: border-box;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
//温湿度告警、紧急告警
|
||
&-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-left: 0.7rem;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
align-content: space-evenly;
|
||
font-size: 0.875rem;
|
||
height: 70%;
|
||
color: rgba(189, 220, 248, 1);
|
||
.unit {
|
||
color: green;
|
||
}
|
||
}
|
||
&-content > div:nth-child(2n-1) {
|
||
width: 40%;
|
||
}
|
||
&-content > div > span:nth-of-type(1) {
|
||
color: rgba(88, 174, 247, 1);
|
||
}
|
||
:deep(.el-carousel__arrow--left) {
|
||
left: vw(-10);
|
||
}
|
||
|
||
:deep(.el-carousel__arrow--right) {
|
||
right: vw(-10);
|
||
}
|
||
:deep(.el-carousel) {
|
||
width: 100%;
|
||
height: vh(108);
|
||
margin-bottom: vh(13);
|
||
}
|
||
:deep(.el-carousel:last-child) {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
:deep(.el-carousel__container) {
|
||
height: vh(108);
|
||
}
|
||
section {
|
||
width: 100%;
|
||
background-size: 100% 100%;
|
||
height: vh(108);
|
||
background-image: url("@/assets/images/alarm-item.png");
|
||
}
|
||
|
||
// 区域入侵
|
||
&-regional {
|
||
align-items: center;
|
||
display: flex;
|
||
font-size: 0.875rem;
|
||
color: rgba(189, 220, 248, 1);
|
||
padding-left: 0.7rem;
|
||
height: 70%;
|
||
&-msg {
|
||
height: 100%;
|
||
margin-left: 0.75rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-evenly;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 100%;
|
||
height: vh(26);
|
||
position: absolute;
|
||
bottom: 0;
|
||
background-image: url("@/assets/images/bottom.png");
|
||
|
||
justify-content: center;
|
||
&-ul {
|
||
width: vw(800);
|
||
// width: vw(960);
|
||
display: flex;
|
||
position: absolute;
|
||
top: -100%;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
&-li {
|
||
margin-left: -1.25rem;
|
||
cursor: pointer;
|
||
img {
|
||
width: vw(176);
|
||
height: vh(36);
|
||
}
|
||
}
|
||
&-li:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
}
|
||
//巡更线列表
|
||
.patrol-line {
|
||
height: vh(356);
|
||
width: 100%;
|
||
// margin-top: 1rem;
|
||
padding: vh(16);
|
||
box-sizing: border-box;
|
||
.qiu-icon {
|
||
display: inline-block;
|
||
width: 0.5rem;
|
||
height: 0.5rem;
|
||
margin-right: 0.3rem;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
:deep(.state2) {
|
||
color: #ffbf00;
|
||
}
|
||
|
||
:deep(.state1) {
|
||
color: #f05657;
|
||
}
|
||
|
||
:deep(.state3) {
|
||
color: #52e76f;
|
||
}
|
||
:deep(.el-table__row--striped) {
|
||
background-image: none !important;
|
||
}
|
||
|
||
:deep(tr.el-table__row td.el-table__cell) {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
:deep(.el-table__inner-wrapper::before) {
|
||
background-color: transparent !important;
|
||
}
|
||
:deep(.el-table .el-table__cell) {
|
||
padding: 0;
|
||
}
|
||
:deep(.el-table .cell) {
|
||
height: 100%;
|
||
line-height: 2.4rem;
|
||
}
|
||
:deep(.el-table tr),
|
||
:deep(.el-table),
|
||
:deep(.el-table th),
|
||
:deep(.el-table td) {
|
||
background-color: transparent;
|
||
}
|
||
:deep(.el-table__row) {
|
||
height: 2.4rem;
|
||
}
|
||
:deep(.el-table) {
|
||
color: rgba(233, 244, 255, 1);
|
||
font-size: 0.8rem;
|
||
height: 100%;
|
||
}
|
||
:deep(.el-table thead) {
|
||
color: rgba(255, 255, 255, 1);
|
||
font-size: 0.8rem;
|
||
background-image: url("@/assets/images/table-header.png");
|
||
height: 2rem;
|
||
line-height: 2rem;
|
||
font-weight: normal;
|
||
}
|
||
:deep(.el-table th.el-table__cell.is-leaf),
|
||
:deep(.el-table td.el-table__cell) {
|
||
border-color: transparent;
|
||
}
|
||
//门禁
|
||
:deep(.el-collapse-item__header) {
|
||
height: 1.75rem;
|
||
padding-left: 0.625rem;
|
||
margin-bottom: vh(10);
|
||
font-size: 0.95rem;
|
||
box-sizing: border-box;
|
||
border: none;
|
||
background-color: transparent;
|
||
color: rgba(233, 244, 255, 1);
|
||
background-image: url("@/assets/images/door-device.png");
|
||
}
|
||
:deep(.el-collapse-item__content) {
|
||
background-color: transparent;
|
||
border: none !important;
|
||
font-size: 1rem;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
:deep(.el-collapse-item__wrap) {
|
||
background-color: transparent;
|
||
border: none;
|
||
}
|
||
:deep(.el-collapse) {
|
||
border: none;
|
||
//border-color: unset;
|
||
}
|
||
:deep(.el-timeline-item__wrapper) {
|
||
padding-left: 0.8rem;
|
||
}
|
||
|
||
:deep(.el-timeline) {
|
||
padding-left: 0.3rem;
|
||
box-sizing: border-box;
|
||
padding-top: 0.5rem;
|
||
}
|
||
|
||
:deep(.el-timeline-item) {
|
||
padding-bottom: 0.4rem;
|
||
}
|
||
|
||
:deep(.el-timeline-item__content) {
|
||
color: rgba(233, 244, 255, 1);
|
||
font-size: 0.875rem;
|
||
padding: 0 1rem;
|
||
//background-image: url('@/assets/images/timeline.png');
|
||
//background-size: 100% 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:deep(.el-timeline-item__node--normal) {
|
||
width: 0.75rem;
|
||
height: 0.75rem;
|
||
left: 1px;
|
||
top: 0.3rem;
|
||
// background-color: transparent;
|
||
background-image: url("@/assets/images/round-icon.png");
|
||
}
|
||
|
||
:deep(.el-timeline-item__tail) {
|
||
//border-color: #0a6594;
|
||
border: 1px dashed #fff;
|
||
height: 87%;
|
||
top: 1.1rem;
|
||
left: 6px;
|
||
}
|
||
</style> |