From c376f7651eb558a72fbfad5860463eeeba68e3ca Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Sat, 22 May 2021 10:34:47 +0800
Subject: [PATCH] 地图
---
public/xcxjingqingmap/img/ren.png | 0
public/xcxjingqingmap/css/body.css | 27 +++++++++
public/xcxjingqingmap/js/vueMain.js | 38 +++++++-----
public/xcxjingqingmap/img/dianhua.png | 0
public/xcxjingqingmap/img/leixing.png | 0
public/xcxjingqingmap/xcxmap.html | 60 ++++++++++++-------
public/xcxjingqingmap/img/shijian.png | 0
public/xcxjingqingmap/img/beizhu.png | 0
8 files changed, 86 insertions(+), 39 deletions(-)
diff --git a/public/xcxjingqingmap/css/body.css b/public/xcxjingqingmap/css/body.css
index 40e01fe..38245ae 100644
--- a/public/xcxjingqingmap/css/body.css
+++ b/public/xcxjingqingmap/css/body.css
@@ -68,4 +68,31 @@
.el-tabs__nav-scroll{
display: flex;
justify-content: center;
+}
+.f-main{
+ /* border: 1px solid springgreen; */
+}
+.f-m-once{
+ /* border: 1px solid rgb(194, 142, 0); */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 5px 0 5px 0
+}
+.f-m-o-title{
+ display: flex;
+ align-items: center;
+ width: 40%;
+}
+.f-m-o-t-img{
+ width: 30px;
+ height: 30px;
+ padding-right: 10px;
+}
+.f-m-o-center{
+ width: 60%;
+}
+.el-divider{
+margin: 0 auto;
+width: 90%;
}
\ No newline at end of file
diff --git a/public/xcxjingqingmap/img/beizhu.png b/public/xcxjingqingmap/img/beizhu.png
new file mode 100644
index 0000000..323a213
--- /dev/null
+++ b/public/xcxjingqingmap/img/beizhu.png
Binary files differ
diff --git a/public/xcxjingqingmap/img/dianhua.png b/public/xcxjingqingmap/img/dianhua.png
new file mode 100644
index 0000000..f5941a6
--- /dev/null
+++ b/public/xcxjingqingmap/img/dianhua.png
Binary files differ
diff --git a/public/xcxjingqingmap/img/leixing.png b/public/xcxjingqingmap/img/leixing.png
new file mode 100644
index 0000000..ba2bb3c
--- /dev/null
+++ b/public/xcxjingqingmap/img/leixing.png
Binary files differ
diff --git a/public/xcxjingqingmap/img/ren.png b/public/xcxjingqingmap/img/ren.png
new file mode 100644
index 0000000..f6200a0
--- /dev/null
+++ b/public/xcxjingqingmap/img/ren.png
Binary files differ
diff --git a/public/xcxjingqingmap/img/shijian.png b/public/xcxjingqingmap/img/shijian.png
new file mode 100644
index 0000000..da0a0ff
--- /dev/null
+++ b/public/xcxjingqingmap/img/shijian.png
Binary files differ
diff --git a/public/xcxjingqingmap/js/vueMain.js b/public/xcxjingqingmap/js/vueMain.js
index ea37386..80caa4e 100644
--- a/public/xcxjingqingmap/js/vueMain.js
+++ b/public/xcxjingqingmap/js/vueMain.js
@@ -20,7 +20,7 @@
// var url = 'https://web.byisf.com/api/blade-jfpts/equipment/equipment/listAll';
// axios.get(url).then((res) => {
// that.getdata = res.data.data;
- that.beginCome();
+ that.beginCome();
// })
},
beginCome() {
@@ -54,10 +54,27 @@
return (false);
},
beginMap(map, data) {
- var that = this;
- var center = [data[0].wd,data[0].jd];
- this.seedata = data[0].datas;
- // console.log(this.seedata)
+ var that = this,
+ center = [data[0].wd, data[0].jd],
+ url = `/api/blade-jfpts/alarm/alarm/APP-getAlarm?id=${data[0].id}`;
+ axios.post(url).then((res) => {
+ // console.log(res)
+ if(res.data.data.length != 0){
+ var dat = res.data.data[0];
+ for(var key in dat){
+ if(dat[key] == null || dat[key] == ''){
+ dat[key] = '暂无'
+ }
+ }
+ this.seedata = dat;
+
+ }else{
+ this.seedata = data[0];
+ }
+ // console.log(this.seedata, 1524545453)
+ })
+
+
var createMap = () => {
map = L.map('map', { //初始化地图
center: center,
@@ -149,16 +166,5 @@
},
mounted() {
this.getDataList();
- // this.getdata = this.getQueryVariable('data');//url解码
-
- // this.map = this.beginMap(this.map, this.getdata);//创建并接受map
- // this.move = new myDomMove('#seedata', '.title', '#map');
- // var dy = document.documentElement.clientHeight - 50;
- // $('#seedata').animate({ top: dy + "px" }, 10);
- // $('#map').css("height", (index, value) => {//改变地图高度
- // return '100%';
- // })
- // this.map.invalidateSize(true);//应用地图高度
- // this.move.followFinger(this.map, 'up');
}
})
\ No newline at end of file
diff --git a/public/xcxjingqingmap/xcxmap.html b/public/xcxjingqingmap/xcxmap.html
index 8e600c6..b847265 100644
--- a/public/xcxjingqingmap/xcxmap.html
+++ b/public/xcxjingqingmap/xcxmap.html
@@ -60,32 +60,46 @@
<el-tab-pane label="警情信息" name="first">
<div class="f-main">
<div class="f-m-once">
- <div class="f-m-o-title">使用方</div>
- <div class="f-m-o-center">{{seedata.place}}</div>
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/ren.png" alt="">
+ 使用方:</div>
+ <div class="f-m-o-center">{{seedata.deptName}}</div>
</div>
- <!-- <div class="a">
- <div class="b"></div>
- <div class="b"></div>
- </div>
- <div class="a">
- <div class="b"></div>
- <div class="b"></div>
- </div>
- <div class="a">
- <div class="b"></div>
- <div class="b"></div>
- </div>
- <div class="a">
- <div class="b"></div>
- <div class="b"></div>
- </div>
- <div class="a">
- <div class="b"></div>
- <div class="b"></div>
- </div> -->
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/ren.png" alt="">
+ 接警人:</div>
+ <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
+ </div>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
+ 联系电话:</div>
+ <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
+ </div>
+ <el-divider></el-divider>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
+ 报警时间:</div>
+ <div class="f-m-o-center">{{seedata.alarmTime}}</div>
+ </div>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
+ 报警类型:</div>
+ <div class="f-m-o-center">{{seedata.alarmType}}</div>
+ </div>
+ <el-divider></el-divider>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/beizhu.png" alt="">
+ 备注:</div>
+ <div class="f-m-o-center">{{seedata.bz}}</div>
+ </div>
</div>
</el-tab-pane>
- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+ <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> -->
<!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
</el-tabs>
--
Gitblit v1.9.3