From 8d837b97ffb27e4e26f067c1febde353bfdf91cf Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 23 Apr 2021 09:16:27 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/jfpt-Vue
---
public/map/popup/html/FlareClusterLayer_v3 copy.html | 328 +++++++++++++++++++++++++++---------------------------
1 files changed, 166 insertions(+), 162 deletions(-)
diff --git a/public/map/popup/html/FlareClusterLayer_v3 copy.html b/public/map/popup/html/FlareClusterLayer_v3 copy.html
index 1993ef2..05fefc7 100644
--- a/public/map/popup/html/FlareClusterLayer_v3 copy.html
+++ b/public/map/popup/html/FlareClusterLayer_v3 copy.html
@@ -9,23 +9,29 @@
<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; */
}
@@ -60,6 +66,8 @@
.f-l-t-r-msg {
width: 200px;
height: 28px;
+ position: relative;
+ top: 23px;
}
.f-l-t-r-but {
@@ -86,9 +94,8 @@
}
.r-b-top {
- height: 200px;
+ height: 250px;
display: flex;
-
display: flex;
flex-direction: column;
}
@@ -129,190 +136,187 @@
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>
\ No newline at end of file
--
Gitblit v1.9.3