| | |
|---|
| | | <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> |
|---|
| | | <!-- element ui --> |
|---|
| | | <link rel="stylesheet" href="../../lib/elementUi.css"> |
|---|
| | | <script src="../../lib/elementUi.js"></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; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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; */ |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | .f-l-t-r-msg { |
|---|
| | | width: 200px; |
|---|
| | | height: 28px; |
|---|
| | | position: relative; |
|---|
| | | top: 23px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .f-l-t-r-but { |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .r-b-top { |
|---|
| | | height: 200px; |
|---|
| | | height: 250px; |
|---|
| | | display: flex; |
|---|
| | | |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | } |
|---|
| | |
|---|
| | | float: left; |
|---|
| | | padding: 0 3px 0 3px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-tabs__active-bar { |
|---|
| | | background-color: aquamarine; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-tabs__item.is-active, |
|---|
| | | .el-tabs__item:hover { |
|---|
| | | color: #5d5d5d; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | |
|---|
| | | <body> |
|---|
| | | <div id="appliutwo" class='police-details-box' class="layui-anim" data-anim="layui-anim-down"> |
|---|
| | | <!-- 从layui传值给iframe 的占位input --> |
|---|
| | | <!-- <div class="aaa bbb">13223456745</div> --> |
|---|
| | | <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 class="f-l-t-r-msg">{{statesss}}</div> |
|---|
| | | <div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</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}} |
|---|
| | | <el-tabs v-model="activeName" @tab-click="handleClick"> |
|---|
| | | <el-tab-pane label="基本信息" name="first"> |
|---|
| | | <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> |
|---|
| | | </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> |
|---|
| | | </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 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> |
|---|
| | | </el-tab-pane> |
|---|
| | | <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> --> |
|---|
| | | </el-tabs> |
|---|
| | | </div> |
|---|
| | | <script src="../../lib/layui/layui.js" charset="utf-8"></script> |
|---|
| | | <script> |
|---|
| | | </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: '' |
|---|
| | | </script> |
|---|
| | | <script> |
|---|
| | | var me = new Vue({ |
|---|
| | | el: '#appliutwo', |
|---|
| | | data: { |
|---|
| | | num: '', |
|---|
| | | name: '', |
|---|
| | | statesss: '', |
|---|
| | | //详细信息data |
|---|
| | | ourData: '', |
|---|
| | | // names: '', |
|---|
| | | contacts: '', |
|---|
| | | calls: '', |
|---|
| | | imgsl: [], |
|---|
| | | deploymentTime: '', |
|---|
| | | oldtime: '', |
|---|
| | | newtime: '', |
|---|
| | | |
|---|
| | | a: true, |
|---|
| | | activeName: 'first' |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | looks(){ |
|---|
| | | window.parent.parent.location.hash = `#/dataL/dataL?id=${this.ourData.id}&deviceName=${this.ourData.deviceName}&deviceNumber=${this.ourData.deviceNumber}&deviceType=${this.ourData.deviceType}&ownership=${this.ourData.ownership}&ownerId=&devicestate=${this.ourData.devicestate}&stime=${this.ourData.stime}&parentId=${this.ourData.parentId}&jd=${this.ourData.jd}&wd=${this.ourData.wd}&street=${this.ourData.street}&dtype=${this.ourData.dtype}&serialNumber=${this.ourData.serialNumber}&stype=&channelNumber=${this.ourData.channelNumber}&pay=&expireTime=${this.ourData.expireTime}&heartbeat=${this.ourData.heartbeat}&province=${this.ourData.province}&city=${this.ourData.city}&district=${this.ourData.district}&state=&reason=&deptId=${this.ourData.deptId}&onePhone=${this.ourData.onePhone}&twoPhone=${this.ourData.twoPhone}&oneId=${this.ourData.oneId}&twoId=&threeId=&oneContacts=${this.ourData.oneContacts}&twoContacts=${this.ourData.twoContacts}&type=${this.ourData.type}&beginTime=&endTime=&pid=${this.ourData.pid}&onlineStatus=${this.ourData.onlineStatus}&jtype=${this.ourData.jtype}&threePhone=${this.ourData.threePhone}&threeContacts=${this.ourData.threeContacts}`; |
|---|
| | | }, |
|---|
| | | 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; |
|---|
| | | getdatas(dat) { |
|---|
| | | |
|---|
| | | 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'; |
|---|
| | | var xhr = null |
|---|
| | | , my = this |
|---|
| | | , url = '/api/blade-jfpts/depl/selectInfo?deviceNumber=' + dat.deviceNumber; |
|---|
| | | if (XMLHttpRequest) { //http请求 |
|---|
| | | xhr = new XMLHttpRequest(); |
|---|
| | | } else { |
|---|
| | | xhr = new ActiveXObject("Microsoft.XMLHTTP"); |
|---|
| | | |
|---|
| | | } |
|---|
| | | xhr.open("post", url, true); |
|---|
| | | xhr.send(); |
|---|
| | | xhr.onreadystatechange = function () { |
|---|
| | | if (xhr.readyState === 4) { |
|---|
| | | if (xhr.status === 200) { |
|---|
| | | // 判断isJson是否传进来了 |
|---|
| | | var imgD = JSON.parse(xhr.responseText);// JSON转js |
|---|
| | | my.imgsl = imgD.data.length == 0? ['no'] : imgD.data; |
|---|
| | | // my.imgsl = [ //最多3张照片 |
|---|
| | | // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57", |
|---|
| | | |
|---|
| | | // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE", |
|---|
| | | // "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433", |
|---|
| | | // ] |
|---|
| | | // console.log(imgD, my.imgsl); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | 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); |
|---|
| | | 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; |
|---|
| | | |
|---|
| | | window.onload = () => { |
|---|
| | | layui.use('element', function () { |
|---|
| | | var $ = layui.jquery |
|---|
| | | , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块 |
|---|
| | | var ct = document.getElementsByClassName('flare-liu-top')[0]; |
|---|
| | | var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色 |
|---|
| | | |
|---|
| | | //触发事件 |
|---|
| | | 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'); //删除：“商品管理” |
|---|
| | | if (dat.onlineStatus == 1) {//el-tabs__active-bar |
|---|
| | | ct.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A'; |
|---|
| | | cordActive.style.backgroundImage = 'linear-gradient(to right, #3DDEA8 , #1FBD9A'; |
|---|
| | | this.statesss = '在线'; |
|---|
| | | |
|---|
| | | |
|---|
| | | // 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'); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }); |
|---|
| | | } else { |
|---|
| | | ct.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F'; |
|---|
| | | cordActive.style.backgroundImage = 'linear-gradient(to right, #787878 , #5F5F5F'; |
|---|
| | | this.statesss = '离线'; |
|---|
| | | |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | handleClick(tab, event) {//标签tab点击事件 |
|---|
| | | // console.log(tab, event); |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | }, |
|---|
| | | 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); |
|---|
| | | |
|---|
| | | |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
