<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
<link rel="stylesheet" href="../style/FlareClusterLayer_v3.css">
|
<script src='../../lib/jquery.js'></script>
|
<script src='../js/FlareClusterLayer_v3.js'></script>
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
|
<!-- layui -->
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
|
<style>
|
body {
|
/* border: 1px solid rgb(48, 170, 48); */
|
}
|
|
#appliu {
|
/* border: 1px solid #000; */
|
border-radius: 5px 5px 5px 5px;
|
}
|
|
.names {
|
width: 200px;
|
height: 45px;
|
color: #fff;
|
border-radius: 5px 5px 5px 5px;
|
line-height: 45px;
|
padding-left: 8px;
|
background-color: #fff;
|
/* border: 1px solid rgb(223, 52, 52); */
|
/* background-4356765795678953423465989-9=\][;'\.,/.,1i123ge: linear-gradient(to right, #FFC031, #F49055);
|
background-image: linear-gradient(to right, #3DDEA8, #1FBD9A);
|
background-image: linear-gradient(to right, #787878, #5F5F5F); */
|
}
|
|
.msgs {
|
width: 200px;
|
height: 30px;
|
line-height: 30px;
|
padding-left: 8px;
|
/* border: 1px solid rgb(30, 160, 192); */
|
}
|
/* .msgs::after{
|
content: '';
|
display: block;
|
width: 10px;
|
height: 10px;
|
background-color: aquamarine;
|
z-index: 1111111;
|
position: relative;
|
top: 40px;
|
left: 20px;
|
} */
|
</style>
|
</head>
|
|
<body>
|
<div id="appliu" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
|
<!-- 从layui传值给iframe 的占位#input1 -->
|
<input type="text" id="input1" ref="sidIputoine" style="display:none">
|
<!-- 从layui传值给iframe 的占位#input2
|
<input type="text" id="input2" ref="ip2" style="display:none" v-model='ip2'> -->
|
<div class="names">{{name}}</div>
|
<div class="msgs">{{num}}</div>
|
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
|
<script>
|
// var index = parent.layer.getFrameIndex(window.name);
|
|
</script>
|
<script>
|
var me = new Vue({
|
el: '#appliu',
|
data: {
|
num: '',
|
name: '',
|
statesss: '',
|
},
|
ourData: '',
|
// ip2: '',
|
// computed: {
|
// ip2s() {
|
// // var a = JSON.parse(this.$refs.ip2.value);
|
// var a = me.ip2;
|
// console.log(a, 'computed');
|
// return a;
|
// }
|
// },
|
methods: {
|
getdatas(dat) {
|
me.name = dat.deviceName.length >= 13 ? dat.deviceName.substring(0, 13) + '···' : dat.deviceName;
|
this.num = "无数据" && dat.deviceNumber;
|
var ct = document.getElementsByClassName('names')[0];
|
// if (dat.onlineStatus == 1) {
|
// ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
|
// } else {
|
// ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
|
|
// }
|
if (dat.state != '') {
|
ct.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #F49966 , #F49966';
|
this.statesss = '故障';
|
} else {
|
if (dat.jtype != 1) {
|
if (dat.onlineStatus == 1) {//el-tabs__active-bar
|
ct.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #32C1A2 , #32C1A2';
|
this.statesss = '在线';
|
} else {
|
ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
|
this.statesss = '离线';
|
}
|
} else {
|
ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
|
// cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
|
this.statesss = '警报';
|
}
|
}
|
}
|
},
|
mounted() {
|
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
|
clearTimeout(this.oldtime);
|
this.ourData = JSON.parse(this.$refs.sidIputoine.value);//json对象转js对象
|
// console.log(this.ourData);
|
this.getdatas(this.ourData);
|
}, 20);
|
|
// window.onload = () => {
|
|
// }
|
|
},
|
watch: {
|
ip2s() {
|
console.log(this.ip2s)
|
}
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
