From fc9b2dd35b7a10998112f74f705c1d1494fc401e Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Sat, 24 Apr 2021 17:25:42 +0800
Subject: [PATCH] 地图细节优化
---
public/map/popup/html/SupervisoryMapYdata.html | 376 ++++++++++++++++++++++++++---------------------------
1 files changed, 186 insertions(+), 190 deletions(-)
diff --git a/public/map/popup/html/SupervisoryMapYdata.html b/public/map/popup/html/SupervisoryMapYdata.html
index 3fb8dea..9f40e6d 100644
--- a/public/map/popup/html/SupervisoryMapYdata.html
+++ b/public/map/popup/html/SupervisoryMapYdata.html
@@ -12,7 +12,9 @@
<!-- element ui -->
<link rel="stylesheet" href="../../lib/elementUi.css">
<script src="../../lib/elementUi.js"></script>
-
+ <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+ <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
+ <script src="../../lib/axios.js"></script>
<!-- layui -->
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
<style>
@@ -37,7 +39,7 @@
.flare-liu-top {
width: 330px;
- height: 90px;
+ height: 140px;
/* border: rgb(211, 154, 31) solid 0.5px; */
display: flex;
align-items: center;
@@ -49,54 +51,38 @@
.f-l-t-heard {
width: 300px;
- height: 30px;
+ height: 50px;
font-size: 18px;
font-family: PingFangSC-Regular;
}
.f-l-t-right {
width: 300px;
- height: 28px;
+ height: 50px;
display: flex;
- align-items: center;
+ /* align-items: center; */
color: white;
justify-content: space-around;
+ flex-direction: column;
+ font-size: 12px;
}
- .f-l-t-center {
- width: auto;
- position: relative;
- left: -103px;
- top: 5px;
+
+ .f-l-t-r-number {
+ width: 180px;
+ margin-left: auto;
}
- .f-l-t-r-msg {
- width: 200px;
- height: 28px;
- position: relative;
- top: 10px;
- left: -5px;
+ .f-l-t-r-time {
+ width: 180px;
+ margin-left: auto;
}
- .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;
+ /* height: 361px; */
/* border: rgb(106, 20, 187) solid 0.5px; */
}
@@ -111,42 +97,61 @@
.r-b-t-main {
display: flex;
align-items: center;
- justify-content: space-between;
+ justify-content: center;
+ /* justify-content: space-between; */
padding: 10px 0 10px 0;
margin-bottom: 5px;
}
+ .r-b-t-main-once {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ padding: 10px 0 10px 0;
+ margin-bottom: 5px;
+ position: relative;
+ left: 11px;
+ }
+
+ .rbt-l,
+ .rbt-r {
+ width: 150px;
+ /* border: rgb(106, 20, 187) solid 0.5px; */
+ }
+
+
+
.r-b-t-left {
- display: block;
+ /* display: block; */
width: 27%;
}
.r-b-t-right {
- display: block;
+ /* 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;
+ .scene-image-box .el-image {
+ display: block;
+ min-height: 200px;
+ margin-bottom: 10px;
}
- .r-b-t-r-imgsl {
-
- float: left;
- padding: 0 3px 0 3px;
+ .scene-image-box {
+ width: 320px;
+ height: 260px;
+ overflow: auto;
}
+
.el-tabs__active-bar {
- background-color: aquamarine;
+ background-color: #F35B5B;
}
.el-tabs__item.is-active,
@@ -161,65 +166,101 @@
<!-- 从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-center">{{machineCode}}</div>
+ <div class="flare-liu-top" style="background-image: linear-gradient(to right, #F35B5B , #F35B5B">
+ <div class="f-l-t-heard">{{datas.place}}</div>
<div class="f-l-t-right">
- <div class="f-l-t-r-msg">{{statesss}}</div>
- <div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
+ <div class="f-l-t-r-number">名称：{{datas.deviceNumber}}</div>
+ <div class="f-l-t-r-time">接警时间：{{datas.jjTime}}</div>
</div>
</div>
<div class="flare-liu-body">
<el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="基本信息" name="first">
+ <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 class="r-b-t-main-once">
+ <span class="r-b-t-left">ID：</span>
+ <span class="r-b-t-right">{{ datas.alarmPeople }}</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 class="r-b-t-main-once">
+ <span class="r-b-t-left">地址：</span>
+ <span class="r-b-t-right">{{ datas.galarmPeople }}</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 class="r-b-t-main-once">
+ <span class="r-b-t-left">类型：</span>
+ <span class="r-b-t-right">{{ datas.galarmPeople }}</span>
+ </div>
+ <div class="r-b-t-main-once">
+ <span class="r-b-t-left">域名：</span>
+ <span class="r-b-t-right">{{ datas.galarmPeople }}</span>
+ </div>
+ <!-- <div class="r-b-t-main-once">
+ <span class="r-b-t-left">使用方：</span>
+ <span class="r-b-t-right">？？</span>
</div> -->
- <!-- 图暂时没有 -->
+ <!-- <div class="r-b-t-main">
+ <div class="rbt-l">
+ <span class="r-b-t-left">警情内容：</span>
+ <span class="r-b-t-right">{{ datas.content }} </span>
+ </div>
+ <div class="rbt-r">
+ <span class="r-b-t-left">警情类型：</span>
+ <span class="r-b-t-right">{{datas.waringType}}</span>
+ </div>
+ </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 class="rbt-l">
+ <span class="r-b-t-left">联系人：</span>
+ <span class="r-b-t-right">{{ datas.oneContacts }} </span>
+ </div>
+ <div class="rbt-r">
+ <span class="r-b-t-left">联系电话：</span>
+ <span class="r-b-t-right">{{datas.onePhone}}</span>
+ </div>
+ </div>
+ <!-- <div class="r-b-t-main">
+ <div class="rbt-l">
+ <span class="r-b-t-left">二级负责人：</span>
+ <span class="r-b-t-right">{{ datas.twoContacts }} </span>
+ </div>
+ <div class="rbt-r">
+ <span class="r-b-t-left">call：</span>
+ <span class="r-b-t-right">{{datas.twoPhone}}</span>
+ </div>
</div>
<div class="r-b-t-main">
- <span class="r-b-t-left">部署时间</span>
- <span class="r-b-t-right">{{ deploymentTime }}</span>
- </div>
+ <div class="rbt-l">
+ <span class="r-b-t-left">三级负责人：</span>
+ <span class="r-b-t-right">{{ datas.threeContacts }} </span>
+ </div>
+ <div class="rbt-r">
+ <span class="r-b-t-left">call：</span>
+ <span class="r-b-t-right">{{datas.threePhone}}</span>
+ </div>
+ </div> -->
</div>
</el-tab-pane>
- <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
+ <!-- <el-tab-pane label="现场图片" name="second">
+ <el-card class="scene-image-box">
+ <el-image v-for="(item, index) in imgSrc" :key="index" :src="item" :preview-src-list="srcList"
+ v-show="imgSrc.length > 0"></el-image>
+ <span v-show="imgSrc.length == 0">暂无现场图片</span>
+ </el-card> -->
+
+ <!-- <el-card class="scene-image-box">
+ <el-image v-for="url in imgSrc" :key="url" :src="url" :preview-src-list="srcList" v-show="imgSrc.length"></el-image> -->
+ <!--<el-image v-for="url in imgSrc" :key="url" :src="url" v-show="imgSrc.length"></el-image>
+ <span v-show="imgSrc.length == 0">暂无现场图片</span>
+ </el-card>
+
+
+ </el-tab-pane> -->
+ <!-- <el-tab-pane label="现场视频" name="third">
+ <el-card>
+ <video :src="feedbackVideo" style="width: 100%; height: 100%; object-fit: fill" controls
+ v-show="feedbackVideo != ''"></video>
+ <span v-show="feedbackVideo == ''">暂无现场视频</span>
+ </el-card>
+ </el-tab-pane> -->
</el-tabs>
</div>
</div>
@@ -232,116 +273,71 @@
var me = new Vue({
el: '#appliutwo',
data: {
- num: '',
- name: '',
- statesss: '',
- //详细信息data
- ourData: '',
- // names: '',
- contacts: '',
- calls: '',
- imgsl: [],
- deploymentTime: '',
- oldtime: '',
- newtime: '',
- machineCode: '',
-
- a: true,
- activeName: 'first'
+ datas: {},
+ activeName: 'first',
+ imgSrc: [],
+ srcList: [],
+ feedbackVideo: "",
+ // aaa: "",
+ // address: "南昌市东湖区永外正街17号",
+ // addvcd: "",
+ // city: "",
+ // coordinate: "POINT(0 0)",
+ // createtime: "2021-03-17 10:06:23",
+ // district: "",
+ // dj: "三级甲等",
+ // haveJW: "无地图经纬度",
+ // id: 10,
+ // information: "<em>南昌一附院</em>一般指南昌大学第一附属医院。南昌大学第一附属医院有东湖院区和象湖院区两个院区，其中东湖院区位于江西省南昌市东湖区永外正街17号，始建于1939年，是一所集医疗、教学、科研、预防保健、康养于一体三级甲等综合医院",
+ // isDelete: -1,
+ // jd: "",
+ // phone: "0791-88692748",
+ // province: "",
+ // type: "医院",
+ // wd: "",
+ // yname: "南昌大学第一附属医院",
+ // ynumber: "CLRK202103171006232744",
},
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=${this.ourData.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}`;
- },
getdatas(dat) {
-
- 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
- // console.log(imgD)
- var imgdatas = [];
- if (imgD.data.length != 0) {
- imgdatas = imgD.data[0].paddress.split(',');
- } else {
-
- }
- // var imgdatas = imgD.data[0].paddress.split(',');
- my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
- // 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);
- }
- }
- }
- this.name = dat.deviceName.length >= 15 ? dat.deviceName.substring(0, 15) + '···' : 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];
- var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色
-
- 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 = '警报';
- }
- }
+ console.log(dat);
},
handleClick(tab, event) {//标签tab点击事件
// console.log(tab, event);
- }
+ },
+ getImgAndVideo() {
+ var that = this;
+ // console.log(this.datas.id)
+ axios({
+ method: "post",
+ url: "/api/blade-jfpts/feedback/feedback/selectFeedEdit",
+ params: {
+ jid: this.datas.id,
+ },
+ }).then((resdata) => {
+ var dL = resdata.data.data;
+ if (dL.length != 0) {
+ if (dL[0].tp.length > 0) {
+ // console.log(dL[0].tp);
+ that.imgSrc = dL[0].tp;
+ that.srcList = dL[0].tp;
+ }
+ if (dL[0].sp.length > 0) {
+ // console.log(dL[0].sp);
+ that.feedbackVideo = dL[0].sp[0];
+ }
+ }
+ });
+ },
},
mounted() {
this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
+ // console.log(this.$refs.sidIput.value);
clearTimeout(this.oldtime);
- this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
- // console.log(this.ourData);
- this.getdatas(this.ourData);
- }, 20);
-
-
+ this.datas = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
+ this.getdatas(this.datas);
+ // this.getImgAndVideo();
+ }, 200);
}
})
</script>
--
Gitblit v1.9.3