<!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>
|
a:hover {
|
color: white;
|
}
|
body{
|
width: 360px;
|
height: 484px;
|
overflow: hidden;
|
}
|
#appliutwo {
|
width: 330px;
|
height: 484px;
|
border-radius: 10px;
|
margin: 16px 15px 16px 15px;
|
|
/* border: springgreen solid 0.5px; */
|
}
|
|
.flare-liu-top {
|
width: 330px;
|
height: 90px;
|
/* border: rgb(211, 154, 31) solid 0.5px; */
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
color: white;
|
border-radius: 5px 5px 5px 5px;
|
}
|
|
.f-l-t-heard {
|
width: 300px;
|
height: 30px;
|
font-size: 18px;
|
font-family: PingFangSC-Regular;
|
}
|
|
.f-l-t-right {
|
width: 300px;
|
height: 28px;
|
display: flex;
|
align-items: center;
|
color: white;
|
justify-content: space-around;
|
}
|
|
.f-l-t-r-msg {
|
width: 200px;
|
height: 28px;
|
}
|
|
.f-l-t-r-but {
|
width: 72.531px;
|
height: 28px;
|
line-height: 28px;
|
text-align: center;
|
background: rgba(255, 255, 255, .2);
|
color: white;
|
/* border: wheat 1px solid; */
|
}
|
|
.f-l-t-r-but a {
|
color: white;
|
width: 48.52px;
|
height: 16px;
|
}
|
|
.flare-liu-body {
|
width: 330px;
|
height: 361px;
|
/* border: rgb(106, 20, 187) solid 0.5px; */
|
|
}
|
|
.r-b-top {
|
height: 200px;
|
display: flex;
|
|
display: flex;
|
flex-direction: column;
|
}
|
|
.r-b-t-main {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
padding: 10px 0 10px 0;
|
margin-bottom: 5px;
|
}
|
|
.r-b-t-left {
|
display: block;
|
width: 27%;
|
|
}
|
|
.r-b-t-right {
|
display: block;
|
width: 70%;
|
color: #5d5d5d;
|
font-size: 12px;
|
|
}
|
|
.r-b-t-r-label {
|
float: left;
|
margin-right: 10px;
|
padding: 0 10px 0 10px;
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
border-radius: 5px;
|
}
|
|
.r-b-t-r-imgsl {
|
|
float: left;
|
padding: 0 3px 0 3px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down">
|
<!-- 从layui传值给iframe 的占位input -->
|
<input type="text" id="sidIput" ref="sidIput" style="display:none">
|
<div class="flare-liu-top">
|
<div class="f-l-t-heard">{{name}}</div>
|
<div class="f-l-t-right">
|
<div class="f-l-t-r-msg"></div>
|
<div class="f-l-t-r-but"> <a href="#">查看详情</a> </div>
|
</div>
|
</div>
|
<div class="flare-liu-body">
|
<!-- layui -->
|
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
<ul class="layui-tab-title">
|
<li class="layui-this">基本信息</li>
|
<li>other</li>
|
<!-- <li>权限分配</li>
|
<li>商品管理</li>
|
<li>订单管理</li> -->
|
</ul>
|
<div class="layui-tab-content" style="height: 100px;">
|
<div class="layui-tab-item layui-show">
|
<div class="r-b-top">
|
<div class="r-b-t-main">
|
<span class="r-b-t-left">设备名称</span>
|
<span class="r-b-t-right">{{ name }}</span>
|
</div>
|
<div class="r-b-t-main">
|
<span class="r-b-t-left">设备联系人</span>
|
<span class="r-b-t-right">{{ contacts }}: {{ calls }}</span>
|
</div>
|
<!-- 设备标签待定 -->
|
<!-- <div class="r-b-t-main">
|
<span class="r-b-t-left">设备标签</span>
|
<span class="r-b-t-right">
|
<div
|
class="r-b-t-r-label"
|
v-for="(value,index) in labels"
|
:key="index"
|
>
|
{{value}}
|
</div>
|
</span>
|
</div> -->
|
<!-- 图暂时没有 -->
|
<div class="r-b-t-main">
|
<span class="r-b-t-left" style="position: relative; top: -27px">部署图片</span>
|
<span class="r-b-t-right">
|
<div class="r-b-t-r-imgsl" v-for="(value, index) in imgsl" :key="index">
|
<el-image style="width: 68px; height: 68px" :src="value"
|
:preview-src-list="imgsl" v-show="value != 'no'">
|
</el-image>
|
<div v-show="value == 'no'" style="
|
width: 68px;
|
height: 68px;
|
text-algin: center;
|
color: rgba(0, 0, 0, 0.5);
|
">
|
无图片
|
</div>
|
</div>
|
</span>
|
</div>
|
<div class="r-b-t-main">
|
<span class="r-b-t-left">部署时间</span>
|
<span class="r-b-t-right">{{ deploymentTime }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-tab-item">
|
|
</div>
|
<!-- <div class="layui-tab-item">内容3</div>
|
<div class="layui-tab-item">内容4</div>
|
<div class="layui-tab-item">内容5</div> -->
|
</div>
|
</div>
|
</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: '#appliutwo',
|
data: {
|
num: '',
|
name: '',
|
//详细信息data
|
ourData: '',
|
// names: '',
|
contacts: '',
|
calls: '',
|
imgsl: [],
|
deploymentTime: '',
|
oldtime: '',
|
newtime: ''
|
},
|
methods: {
|
getdatas(dat) {
|
this.name = dat.deviceName;
|
me.num = dat.deviceNumber;
|
this.evaluate = "空气质量";
|
this.machineCode = "无数据" && dat.deviceNumber;
|
this.smoke = "烟雾";
|
this.proportion = "电量";
|
this.ReportTime = "最近上报：" + dat.heartbeat;
|
this.contacts = "无数据" && dat.oneContacts;
|
this.calls = "无数据" && dat.onePhone;
|
this.labels = ["无数据"] && [dat.deviceType];
|
var imgD = ["no"];
|
this.imgsl = ["no"] && imgD;
|
this.deploymentTime = "无数据" && dat.stime;
|
|
var ct = document.getElementsByClassName('flare-liu-top')[0];
|
if (dat.onlineStatus == 1) {
|
ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A';
|
} else {
|
ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F';
|
|
}
|
}
|
},
|
mounted() {
|
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
|
clearTimeout(this.oldtime);
|
this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
|
// console.log(this.ourData);
|
this.getdatas(this.ourData);
|
}, 20);
|
|
window.onload = () => {
|
layui.use('element', function () {
|
var $ = layui.jquery
|
, element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
|
|
//触发事件
|
var active = {
|
// tabAdd: function () {
|
// //新增一个Tab项
|
// element.tabAdd('demo', {
|
// title: '新选项' + (Math.random() * 1000 | 0) //用于演示
|
// , content: '内容' + (Math.random() * 1000 | 0)
|
// , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
|
// })
|
// }
|
// , tabDelete: function (othis) {
|
// //删除指定Tab项
|
// element.tabDelete('demo', '44'); //删除：“商品管理”
|
|
|
// othis.addClass('layui-btn-disabled');
|
// }
|
// ,
|
tabChange: function () {
|
//切换到指定Tab项
|
element.tabChange('demo', '22'); //切换到：用户管理
|
}
|
};
|
|
$('.site-demo-active').on('click', function () {
|
var othis = $(this), type = othis.data('type');
|
active[type] ? active[type].call(this, othis) : '';
|
});
|
|
//Hash地址的定位
|
var layid = location.hash.replace(/^#test=/, '');
|
element.tabChange('test', layid);
|
|
element.on('tab(test)', function (elem) {
|
location.hash = 'test=' + $(this).attr('lay-id');
|
});
|
|
});
|
|
}
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
