907 lines
23 KiB
Vue
907 lines
23 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(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 />
|
|
</div>
|
|
<div class="container">
|
|
<div class="container-left">
|
|
<div class="container-left-box">
|
|
<!-- 报警列表 -->
|
|
<div class="public-title">
|
|
<span class="font">报警列表</span>
|
|
<span class="more">
|
|
|
|
</span>
|
|
</div>
|
|
<div class="alarmList">
|
|
|
|
<section class="regional" v-for="item in alarmList.regional">
|
|
<div class="alarmList-type">
|
|
区域入侵
|
|
</div>
|
|
<div class="alarmList-regional">
|
|
<div style="width: 2.75rem; height:2.75rem;display: flex;align-items: center">
|
|
<el-image style="width: 2.75rem; height: 2.75rem" :src="cameraUrl" 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>
|
|
<section class="humidity" v-for="item in alarmList.humidity">
|
|
<div class="alarmList-type">
|
|
温湿度告警
|
|
</div>
|
|
<div class="alarmList-content">
|
|
<div>
|
|
<i class="drop"></i>
|
|
<span>当前温度：</span>
|
|
<span>{{item.humidity}}</span>
|
|
</div>
|
|
<div>
|
|
<i class="drop"></i>
|
|
<span>报警温度：</span>
|
|
<span>{{item.alarmHumidity}}</span>
|
|
</div>
|
|
<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>
|
|
</section>
|
|
<section class="urgent" v-for="item in alarmList.urgent">
|
|
<div class="alarmList-type">
|
|
紧急告警
|
|
</div>
|
|
<div class="alarmList-content">
|
|
<div>
|
|
<i class="drop"></i>
|
|
<span>当前温度：</span>
|
|
<span>{{item.humidity}}</span>
|
|
</div>
|
|
<div>
|
|
<i class="drop"></i>
|
|
<span>报警温度：</span>
|
|
<span>{{item.alarmHumidity}}</span>
|
|
</div>
|
|
<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>
|
|
</section>
|
|
</div>
|
|
<div class="public-title">
|
|
<span class="font">钥匙柜状态总览</span>
|
|
<span class="record-icon">
|
|
|
|
</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>
|
|
<section v-for="(item,index) in keywordList" class="keyword-item" :class="'keyword-item-state'+item.keyState">
|
|
<span>{{item.keyCapturing}}号锁位</span>
|
|
<span class="position">{{item.position}}</span>
|
|
</section>
|
|
</div>
|
|
<!-- 门禁进入实况-->
|
|
<div class="access-title">
|
|
<span>门禁进入实况</span>
|
|
</div>
|
|
<div class="access-control">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item :title="item.doorName" :name="item.doorName" v-for="item in doorNames">
|
|
<el-timeline>
|
|
<el-timeline-item v-for="(activity, index) in item.data" :key="index">
|
|
<p 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.60)">{{
|
|
activity.inAndOutType == -1
|
|
? "出库房"
|
|
: activity.inAndOutType == 1
|
|
? "进入库房"
|
|
: "未知"
|
|
}}</span>
|
|
</span>
|
|
<span style="color: rgba(0, 221, 255, 1);font-size: .75rem">{{ activity.eventTime }}</span>
|
|
</p>
|
|
<!-- <div class="enterImg">-->
|
|
<!-- <img :src="'https://192.168.3.3:443' + activity.picUri" alt="" />-->
|
|
<!-- </div>-->
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-right">
|
|
<div class="container-right-box">
|
|
<!-- 排班表 -->
|
|
<div class="public-title">
|
|
<span class="font">排班表</span>
|
|
<span class="more">
|
|
|
|
</span>
|
|
</div>
|
|
<div class="schedule-date">
|
|
<p>
|
|
<i class="drop"></i>
|
|
日期：{{schedule.date}}
|
|
</p>
|
|
<p style="margin-left: 2.37rem">
|
|
<i class="drop"></i>
|
|
时间：{{schedule.day}}
|
|
</p>
|
|
<p>
|
|
<i class="drop"></i>
|
|
星期：{{schedule.week}}
|
|
</p>
|
|
</div>
|
|
<div class="schedule-person">
|
|
<section v-for="(item,index) in schedule.person" class="schedule-person-item">
|
|
|
|
</section>
|
|
</div>
|
|
<!-- 巡更线监控 -->
|
|
<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>
|
|
<!-- <i class="qiu-icon" :style="'background-color:' + getColor(scope.row.state)"></i>{{
|
|
getFont(scope.row.state) }} -->
|
|
<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>
|
|
</div>
|
|
<!-- 底部-->
|
|
<div class="footer">
|
|
<ul class="footer-ul">
|
|
<li class="footer-ul-li" v-for="(item,index) in footerList" @click="dialogShow=true">
|
|
<img :src="item.default" alt="">
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 底部点击弹框 -->
|
|
<Dialog @close="closeHandle" v-if="dialogShow"/>
|
|
</template>
|
|
<script setup>
|
|
import getPath from "@/utils/getPath.js";
|
|
import Three from '@/components/Three.vue'
|
|
import {ref} from 'vue'
|
|
import cameraUrl from '@/assets/images/camera.png'
|
|
import NAV from '@/components/nav.vue'
|
|
import Dialog from '@/components/dialog.vue'
|
|
// 侧边栏
|
|
const asideList = ref([
|
|
{
|
|
default:getPath.store,
|
|
select:getPath.storeSelect,
|
|
rightImg:getPath.storePrompt,
|
|
},
|
|
{
|
|
default:getPath.monitorPoint,
|
|
select:getPath.monitorPointSelect,
|
|
rightImg:getPath.monitorPointPrompt,
|
|
},
|
|
{
|
|
default:getPath.alarmHost,
|
|
select:getPath.alarmHostSelect,
|
|
rightImg:getPath.alarmHostPrompt,
|
|
},
|
|
{
|
|
default:getPath.water,
|
|
select:getPath.waterSelect,
|
|
rightImg:getPath.waterPrompt,
|
|
},
|
|
{
|
|
default:getPath.smoke,
|
|
select:getPath.smokeSelect,
|
|
rightImg:getPath.smokePrompt,
|
|
},
|
|
{
|
|
default:getPath.humidity,
|
|
select:getPath.humiditySelect,
|
|
rightImg:getPath.humidityPrompt,
|
|
},
|
|
{
|
|
default:getPath.accessControl,
|
|
select:getPath.accessControlSelect,
|
|
rightImg:getPath.accessControlPrompt,
|
|
},
|
|
])
|
|
// 底部栏
|
|
const footerList = ref([
|
|
{title:'首页',default:getPath.home,select:getPath.homeSelect},
|
|
{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}
|
|
])
|
|
// 报警列表
|
|
const alarmList = ref({
|
|
regional:[
|
|
{
|
|
address:'东6厂房西侧摄像头',
|
|
date:'2022-07-18 12:02:56'
|
|
}
|
|
],
|
|
humidity:[
|
|
{
|
|
alarmHumidity:'40℃',
|
|
humidity:'40℃',
|
|
address:'西3区厂房',
|
|
date:'2022-07-18 12:02:56'
|
|
}
|
|
],
|
|
urgent:[
|
|
{
|
|
alarmHumidity:'40℃',
|
|
humidity:'40℃',
|
|
address:'西3区厂房',
|
|
date:'2022-07-18 12:02:56'
|
|
}
|
|
]
|
|
})
|
|
// 钥匙柜
|
|
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",
|
|
},
|
|
]);
|
|
// 门禁进入实况
|
|
const activeNames = ref([])
|
|
const doorNames = ref([
|
|
{
|
|
doorName:'1号仓库',
|
|
data:[
|
|
{personName:'张集网',eventTime:'12:27',inAndOutType:-1},{personName:'张集网',eventTime:'12:27',inAndOutType:-1},{personName:'张集网',eventTime:'12:27',inAndOutType:-1}
|
|
]
|
|
},
|
|
{
|
|
doorName:'2号仓库',
|
|
data:[
|
|
{personName:'张集网',eventTime:'12:27',inAndOutType:-1},{personName:'张集网',eventTime:'12:27',inAndOutType:-1}
|
|
]
|
|
}
|
|
])
|
|
// 排班表
|
|
const schedule = ref({
|
|
date:'2022-07-08',
|
|
week:'周日',
|
|
day:'18:04:55',
|
|
person:[
|
|
{},
|
|
{},
|
|
{},
|
|
]
|
|
})
|
|
// 巡更线
|
|
const tableData = ref([
|
|
{
|
|
position: "巡更点1",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点2",
|
|
state: "0",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点3",
|
|
state: "2",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点4",
|
|
state: "3",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点5",
|
|
state: "4",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点6",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点7",
|
|
state: "2",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点8",
|
|
state: "2",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点9",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
state: "1",
|
|
history: "刘七七 2020/06/08 14:27:11",
|
|
},
|
|
{
|
|
position: "巡更点10",
|
|
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){
|
|
dialogShow.value = false
|
|
}
|
|
const deviceIndex = ref(0)
|
|
// 侧边栏点击事件控制three中设备显隐
|
|
function toggleDevice(index){
|
|
deviceIndex.value = index
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.aside{
|
|
//height: vh(380);
|
|
width: vw(44);
|
|
position: fixed;
|
|
bottom: vh(81);
|
|
left:vw(456);
|
|
z-index:99;
|
|
&-li{
|
|
width: 100%;
|
|
position: relative;
|
|
margin-bottom: .6rem;
|
|
&-msg{
|
|
position: absolute;
|
|
left: 107%;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
//公共小圆点
|
|
.drop{
|
|
margin-right: 0.5rem;
|
|
width: 0.8rem;
|
|
display: inline-block;
|
|
height: 0.8rem;
|
|
background-image: url('@/assets/images/drop.png');
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&-left, &-right {
|
|
padding-top: vw(104);
|
|
width: vw(380);
|
|
height: 100%;
|
|
position: relative;
|
|
&-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
//标题
|
|
.public-title,.access-title{
|
|
height:vh(40);
|
|
width: 108%;
|
|
position: relative;
|
|
right: 4%;
|
|
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');
|
|
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%;
|
|
//报警列表
|
|
.alarmList{
|
|
width: 100%;
|
|
height: vh(364);
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-evenly;
|
|
&-type{
|
|
margin-top: .75rem;
|
|
margin-left: 1.3rem;
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
//温湿度告警、紧急告警
|
|
&-content{
|
|
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding-left: .7rem;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
align-content: space-evenly;
|
|
font-size: 0.875rem;
|
|
height: 70%;
|
|
color:rgba(189, 220, 248, 1);
|
|
}
|
|
&-content>div:nth-child(2n-1){
|
|
width: 40%;
|
|
}
|
|
&-content>div>span:nth-of-type(1){
|
|
color: rgba(88, 174, 247, 1);
|
|
}
|
|
section{
|
|
width: 100%;
|
|
height: 30%;
|
|
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: .7rem;
|
|
height: 70%;
|
|
&-msg{
|
|
height: 100%;
|
|
margin-left: .75rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: space-evenly;
|
|
}
|
|
}
|
|
}
|
|
// 钥匙柜
|
|
.keyword{
|
|
width: 100%;
|
|
//background-color: #fff;
|
|
height: vh(220);
|
|
&-state{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: .75rem;
|
|
margin: 1rem 0;
|
|
&-icon0,&-icon1{
|
|
width: 0.875rem;
|
|
height: .875rem;
|
|
background-size: 100% 100%;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: .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');
|
|
}
|
|
}
|
|
&-item{
|
|
float: left;
|
|
width: 23.5%;
|
|
font-size: .75rem;
|
|
height: 24%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
box-sizing: border-box;
|
|
justify-content: flex-end;
|
|
margin-bottom: .5rem;
|
|
background-image: url('@/assets/images/has-bg.png');
|
|
background-size: 100% 100%;
|
|
margin-right: .45rem;
|
|
position: relative;
|
|
.position{
|
|
top: 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
white-space: nowrap;
|
|
font-size: .625rem;
|
|
transform: translate(-50%);
|
|
|
|
}
|
|
&-state1{
|
|
background-image: url('@/assets/images/has-bg.png');
|
|
color: rgba(0, 237, 197, 1);
|
|
}
|
|
&-state0{
|
|
color: rgba(255, 255, 255, 1);
|
|
background-image: url('@/assets/images/noHas-bg.png');
|
|
}
|
|
}
|
|
&-item:nth-of-type(4n){
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
//门禁进入实况
|
|
.access-control{
|
|
margin-top: 1rem;
|
|
height: vh(175);
|
|
overflow-y: scroll;
|
|
}
|
|
.access-control::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
background-image: url('@/assets/images/right-mask.png');
|
|
padding-right: 3.5rem;
|
|
background-size: 100% 100%;
|
|
.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:1rem 0;
|
|
}
|
|
.schedule-person{
|
|
&-item{
|
|
width: 30%;
|
|
height: 100%;
|
|
background-image: url('@/assets/images/schedule-person.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
justify-content: space-between;
|
|
height: vh(160);
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 1.8rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
|
|
width: 100%;
|
|
height: vh(26);
|
|
position: absolute;
|
|
bottom: 0;
|
|
background-image: url('@/assets/images/bottom.png');
|
|
|
|
justify-content: center;
|
|
&-ul{
|
|
width: vw(800);
|
|
display: flex;
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
&-li{
|
|
margin-left: -1.25rem;
|
|
cursor: pointer;
|
|
}
|
|
&-li:nth-child(1){
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
//巡更线列表
|
|
.patrol-line{
|
|
height: vh(540);
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
.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;
|
|
font-size: 1rem;
|
|
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: .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: 59%;
|
|
top: 1.1rem;
|
|
left: 6px;
|
|
}
|
|
|
|
</style> |