<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>拉西瓦水电站监测展示后台</title>
|
<link rel="stylesheet" href="/css/zxx/indexPublic.css">
|
<link rel="stylesheet" href="/css/zxx/areaUnlock.css">
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
<script src="/js/jquery-3.2.1.js"></script>
|
<script src="/js/zxx/flexible.js"></script>
|
<script src="/layui/layui.js"></script>
|
<!--<script src="/js/zxx/ajaxUtil.js"></script>-->
|
<!-- 引入Vue -->
|
<script src="/js/zxx/vue.js"></script>
|
<style>
|
.contant {
|
text-overflow: ellipsis;
|
word-break: break-word;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient:vertical;
|
display: block;
|
display: -webkit-box;
|
width:70px;
|
overflow:hidden;
|
color:#fff;
|
font-size:12px;
|
}
|
.button1 {
|
|
width: 180px;
|
|
height: 30px;
|
|
font-size: 14px;
|
|
font-family: 微软雅黑;
|
|
letter-spacing: 2px;
|
|
padding-left: 2px;
|
|
border-radius: 6px;
|
|
background: -webkit-linear-gradient(top, #66B5E6, #2e88c0);
|
|
background: -moz-linear-gradient(top, #66B5E6, #2e88c0);
|
|
background: linear-gradient(top, #66B5E6, #2e88c0);
|
|
background: -ms-linear-gradient(top, #66B5E6, #2e88c0);
|
|
border: 1px solid #2576A8;
|
|
box-shadow: 0 1px 2px #B8DCF1 inset, 0 -1px 0 #316F96 inset;
|
|
color: #fff;
|
|
text-shadow: 1px 1px 0.5px #22629B;
|
|
}
|
|
.button1:hover {
|
|
background: -webkit-linear-gradient(top, #8DC9EF, #4E9FD1);
|
|
background: -moz-linear-gradient(top, #8DC9EF, #4E9FD1);
|
|
background: linear-gradient(top, #8DC9EF, #4E9FD1);
|
|
background: -ms-linear-gradient(top, #8DC9EF, #4E9FD1);
|
|
}
|
</style>
|
</head>
|
<body>
|
<div class="index-wrap" id="app">
|
<div class="index-header">
|
<div class="titlesBox">
|
<!--<h1 class="title1">拉西瓦水电站监测展示后台</h1>
|
<h2 class="title2">Laxiwa Hydropower Station monitoring display background</h2>-->
|
<img class="hearLogo" src="/img/zxx/hearLogo.png" alt="">
|
<div class="titleName">
|
<h1>青海黄河水电公司拉西瓦发电分公司</h1>
|
<h2>智慧门禁管理平台：区域解锁</h2>
|
</div>
|
</div>
|
<ul class="nav-left">
|
<li class="nav-block">
|
<img src="/img/zxx/backIcon.png" alt="">
|
<span class="back"><a href="/goStation">首页</a></span>
|
</li>
|
</ul>
|
</div>
|
<div class="areaUnlock-box">
|
<div class="areaUnlock-left">
|
<div class="areaUnlock-inside">
|
<div class="areaUnlock-block" :class="{fifterBox:clickedLeft == index}" v-for="(item,index) in unLeftTitle" :key="index" @click="LeftNavFn(item.title,index)">{{item.title}}</div>
|
</div>
|
</div>
|
<div class="tabs-content-placeholder">
|
<div class="areaUnlock-right">
|
<div class="areaUnlock-top">
|
<div class="unlockTop-block" :class="{checkedTopNav:clickedTop == index}" v-for="(item,index) in unTopTitle" :key="index" @click="TopNavFn(item,index)">{{item.title}}</div>
|
</div>
|
<div class="areaUnlock-bottom">
|
<button class="button1" id="open1" @click="openDoor2(1)">1号发电机短开</button>
|
<button class="button1" id="open2" @click="openDoor2(2)">1号发电机常开</button>
|
<button class="button1" id="open3" @click="closeDoor2()">1号发电机关闭</button>
|
<div class="areaUnlock-bottom-inside">
|
<div class="unlockBlockBox" :key="index" v-for="(item,index) in doors">
|
<img v-if="item.expandStatus == 2" class="jinduTiao" src="/img/zxx/tiaoRed.gif" alt="">
|
<img v-if="item.expandStatus == 1" class="jinduTiao" src="/img/zxx/tiaoGreen.gif" alt="">
|
<img v-if="item.expandStatus == 0" class="jinduTiao" src="/img/zxx/tiaoBlue.gif" alt="">
|
<img class="smallLogo" src="/img/zxx/smallLogo.png" alt="">
|
<span class="contant" :title="item.doorName">
|
{{item.doorName}}
|
</span>
|
<!-- <h1>智能门禁智能门禁</h1>-->
|
<!--<img class="zhiwenImg" src="/img/zxx/zhiwenImg6.png" alt="">-->
|
<h2>
|
<button style="background-color:#00f0ff;" @click="openDoor(item,1)">短开</button>
|
<button style="background-color:#00f0ff;" @click="openDoor(item,2)" v-if="titleFlag">常开</button>
|
<button style="background-color:#00f0ff;" @click="closeDoor(item)" v-if="titleFlag">关闭</button>
|
</h2>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<input id="doorId" type="hidden">
|
</div>
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
clickedLeft: 0, // 左侧导航选中
|
clickedTop: 0, // 顶部导航选中
|
message: 'Hello Vue!',
|
unLeftTitle:[{
|
title:'1号发电机'
|
},{
|
title:'2号发电机',
|
},{
|
title:'3号发电机'
|
},{
|
title:'5号发电机'
|
},{
|
title:'6号发电机'
|
},{
|
title:'坝上'
|
},{
|
title:'副厂房'
|
},{
|
title:'GISGIL室'
|
},{
|
title:'主变洞'
|
},{
|
title:'交通洞'
|
}],
|
unTopTitle:[],
|
doors:[],
|
titleFlag:true
|
},
|
methods: {
|
LeftNavFn(n,index) {
|
$('#open1').html(n+'短开')
|
$('#open2').html(n+'常开')
|
$('#open3').html(n+'关闭')
|
this.clickedLeft = index
|
this.getLeft(n)
|
},
|
TopNavFn(n,index){
|
this.titleFlag = true;
|
if(n.title){
|
if(n.title=='发电机层'){
|
this.titleFlag = false
|
$('#open1').html(n.title+'短开')
|
}else{
|
$('#open1').html(n.title+'短开')
|
$('#open2').html(n.title+'常开')
|
$('#open3').html(n.title+'关闭')
|
}
|
}
|
$('#doorId').val(n.id)
|
console.log(n.title)
|
console.log(index)
|
// alert('正在加载' + n.title)
|
this.doors = []
|
$.ajax({
|
url:'/station/areaManagement/list2',
|
type:'post',
|
data:{areaParentId:n.id},
|
dataType:'json',
|
success:res=>{
|
res.filter(item=>{
|
item.expandStatus = item.expandStatus == null ? 0 : item.expandStatus
|
})
|
this.doors = res
|
// alert('加载完毕' + n.title)
|
}
|
})
|
this.clickedTop = index
|
},
|
openDoor(n,type) {
|
var msg=confirm("确认开门吗!");
|
if (msg==false) {
|
return false;
|
}if (msg==true) {
|
console.log(n,type)
|
$.ajax({
|
url:'/station/areaManagement/openDoor',
|
type:'post',
|
data:{id:n.id,type:type},
|
success:res=>{
|
if(res.code==0){
|
alert(n.doorName +" 开门指令发送成功")
|
}
|
}
|
})
|
}
|
},
|
openDoor2(type) {
|
var msg=confirm("确认开门吗!");
|
if (msg==false) {
|
return false;
|
}if (msg==true) {
|
var dId = $('#doorId').val();
|
console.log(type)
|
$.ajax({
|
url:'/station/areaManagement/openDoor2',
|
type:'post',
|
data:{id:dId,type:type},
|
success:res=>{
|
if(res.code==0){
|
alert(" 开门指令发送成功")
|
}
|
}
|
})
|
}
|
|
},
|
closeDoor(n) {
|
var msg=confirm("确认关门吗!");
|
if (msg==false) {
|
return false;
|
}if (msg==true) {
|
$.ajax({
|
url:'/station/areaManagement/closeDoor',
|
type:'post',
|
data:{id:n.id},
|
success:res=>{
|
if(res.code==0){
|
alert(n.doorName +" 关门指令发送成功")
|
}
|
}
|
})
|
}
|
|
},
|
closeDoor2() {
|
var msg=confirm("确认关门吗!");
|
if (msg==false) {
|
return false;
|
}if (msg==true) {
|
var dId = $('#doorId').val();
|
$.ajax({
|
url:'/station/areaManagement/closeDoor2',
|
type:'post',
|
data:{id:dId},
|
success:res=>{
|
if(res.code==0){
|
alert(" 关门指令发送成功")
|
}
|
}
|
})
|
}
|
|
},
|
getLeft(oneName) {
|
this.unTopTitle = [];
|
$.ajax({
|
url:'/station/areaManagement/findByName',
|
type:'post',
|
data:{name:oneName},
|
success:res=>{
|
res.filter(item=>{
|
this.unTopTitle.push({
|
title:item.areaName,
|
id:item.id
|
})
|
})
|
this.TopNavFn({title:this.unTopTitle[0].doorName,id:this.unTopTitle[0].id},0)
|
console.log(res)
|
$('#doorId').val(res[0].areaParentId)
|
}
|
})
|
|
}
|
// })
|
// }
|
},
|
mounted() {
|
|
this.getLeft('1号机组')
|
}
|
})
|
</script>
|
</body>
|
</html>
|
