| New file |
| | |
|---|
| | | <!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> |
|---|
