From d7f724edb01dfba9f2e0365c8e9769579f017de0 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 24 May 2021 17:45:27 +0800
Subject: [PATCH] 小程序地图
---
public/xcxjingqingmap/css/body.css | 106 ++++++++++++++++++++
public/xcxjingqingmap/js/vueMain.js | 76 ++++++++++++++
public/xcxjingqingmap/xcxmap.html | 65 ++++++++++++-
public/xcxjingqingmap/img/xiangji.png | 0
public/xcxjingqingmap/img/gaunbi.png | 0
public/xcxjingqingmap/img/shiping11.png | 0
6 files changed, 237 insertions(+), 10 deletions(-)
diff --git a/public/xcxjingqingmap/css/body.css b/public/xcxjingqingmap/css/body.css
index f9b7c31..5bb32e7 100644
--- a/public/xcxjingqingmap/css/body.css
+++ b/public/xcxjingqingmap/css/body.css
@@ -11,6 +11,7 @@
#map {
width: 100%;
height: 50%;
+ z-index: 1;
}
#mapVue {
@@ -24,7 +25,7 @@
height: 38px;
top: 100px;
right: 0;
- z-index: 10000;
+ z-index: 100;
background-color: #fff;
border-radius: 20px;
opacity: 0.8;
@@ -55,7 +56,7 @@
position: relative;
/* top: -3%; */
background-color: #fff;
- z-index: 401;
+ z-index: 101;
display: flex;
align-items: center;
justify-content: center;
@@ -123,6 +124,40 @@
padding-top: 5px;
}
+.buta {
+ /* border: 1px solid #4D7CEE; */
+}
+
+.shipingPopup {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 200;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.s-p-main {
+ width: 90%;
+ height: 90%;
+ /* background-color: #fff; */
+}
+
+.s-p-gaunbi {
+ position: relative;
+ left: 90%;
+ width: 50px;
+ height: 50px;
+}
+
+/* video::-webkit-media-controls-timeline {
+ display: none;
+} */
+
.butb {
width: 80px;
height: 80px;
@@ -132,10 +167,75 @@
align-items: center;
justify-content: center;
color: #fff;
- background-image: linear-gradient(to bottom, #3CA7F4 , #4D7CEE);
+ background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE);
+}
+
+/* .resultFeedback {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 201;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+} */
+
+/* .b-r-main {
+ width: 90%;
+ height: 90%;
+}
+
+.b-r-gaunbi {
+ position: relative;
+ left: 90%;
+ width: 50px;
+ height: 50px;
+}
+
+.b-r-main-in {
+ width: 100%;
+ height: auto;
+ padding-bottom: 20px;
+ background-color: #fff;
+ border-radius: 10px;
+}
+
+.b-r-m-i-once {
+ padding: 10px 0 10px 10px;
+ display: flex;
+ justify-content: space-around;
+}
+
+.b-r-m-i-o-title {
+ width: 30%;
+ position: relative;
+ top: 10px;
+}
+
+.b-r-m-i-o-center {
+ width: 70%;
+}
+.b-r-i-o-ups{
+ /* align-items: center; */
+}
+.b-r-m-i-o-c-img {
+ width: 50px;
+ height: 50px;
+}
+.b-r-m-but{
+ position: relative;
+ left: calc(50% - 40px);
+} */
+.butc {
+ /* border: 1px solid #4D7CEE; */
}
.b-b-img {
width: 40px;
height: 40px;
+ display: block;
+ /* border: 1px solid #4D7CEE; */
}
\ No newline at end of file
diff --git a/public/xcxjingqingmap/img/gaunbi.png b/public/xcxjingqingmap/img/gaunbi.png
new file mode 100644
index 0000000..f3dfa18
--- /dev/null
+++ b/public/xcxjingqingmap/img/gaunbi.png
Binary files differ
diff --git a/public/xcxjingqingmap/img/shiping11.png b/public/xcxjingqingmap/img/shiping11.png
new file mode 100644
index 0000000..c94662f
--- /dev/null
+++ b/public/xcxjingqingmap/img/shiping11.png
Binary files differ
diff --git a/public/xcxjingqingmap/img/xiangji.png b/public/xcxjingqingmap/img/xiangji.png
new file mode 100644
index 0000000..6aa4b02
--- /dev/null
+++ b/public/xcxjingqingmap/img/xiangji.png
Binary files differ
diff --git a/public/xcxjingqingmap/js/vueMain.js b/public/xcxjingqingmap/js/vueMain.js
index b0dd866..0fe0a90 100644
--- a/public/xcxjingqingmap/js/vueMain.js
+++ b/public/xcxjingqingmap/js/vueMain.js
@@ -1,4 +1,3 @@
-// import myDomMove from './move'
var me = new Vue({
el: '#mapVue',
data: {
@@ -15,6 +14,11 @@
seedata: '',
nowPosition: '',
+
+ shipingPopupShow: false,
+ shipingM3u8Url: '',
+ resultFeedbackPopupShow: false,
+ popupDisplay: "none",
},
methods: {
getDataList() {
@@ -167,13 +171,81 @@
locationMap() {
this.map.setView(this.nowPosition, 12);
+ // console.log(wx,12);
+ // wx.miniProgram.navigateTo({url: 'pages/workbench/workbench'})
+ },
+ shipingClick(open) {//打开视频
+ if (open) {
+ this.openRealVideoBox(this.seedata.serialNumber, this.seedata.channelNumber, this.seedata.deviceNumber, this.seedata.manufacturer);
+ } else {
+ this.shipingPopupShow = false;
+ }
+ },
+ resultFeedbackClick() {//结果反馈跳转小程序
+ this.gotoxcx('policeDetails');
+ },
+ openRealVideoBox(serialNumber, channelNumber, deviceNumber, manufacturer) {//获取视频地址
+ var that = this;
+ if (manufacturer == "HK") {
+ axios
+ .get(
+ `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.address;
+ that.shipingM3u8Url = decodeURIComponent(that.videoSource);
+ that.shipingPopupShow = true;
+ })
+ .ce;
+ } else {
+ var newAxios = axios.create({
+ baseURL: "https://web.byisf.com:18000",
+ withCredentials: false,
+ headers: {
+ "Content-type": "application/x-www-form-urlencoded",
+ },
+ });
+ newAxios
+ .post(
+ "/api_control",
+ {},
+ {
+ params: {
+ param: JSON.stringify({ PktType: "GetAccessToken" }),
+ },
+ }
+ )
+ .then((res) => {
+ newAxios
+ .get(
+ `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.m3u8;
+ that.shipingM3u8Url = decodeURIComponent(that.videoSource);
+ that.shipingPopupShow = true;
+ });
+ });
+ }
+ },
+ upData() {
+ console.log('上传信息成功')
+ },
+ gotoxcx(routs) {
+ wx.miniProgram.navigateTo({
+ url:`../poput/workbench/policeDetails/${routs}?id=${this.seedata.id}`, //指定跳转至小程序页面的门路
+ success: function(){
+ console.log('success'); //页面跳转胜利的回调函数
+ }
+ });
}
+
},
created() {
},
mounted() {
this.getDataList();
},
- wacth:{
+ wacth: {
}
})
\ No newline at end of file
diff --git a/public/xcxjingqingmap/xcxmap.html b/public/xcxjingqingmap/xcxmap.html
index 04d0cba..3bab1ec 100644
--- a/public/xcxjingqingmap/xcxmap.html
+++ b/public/xcxjingqingmap/xcxmap.html
@@ -35,7 +35,7 @@
<script src="../map/lib/jquery.js" charset="utf-8"></script>
<!-- 微信支持 -->
- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
+ <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- <script src="./js/wx.js"></script> -->
<!-- omyself支持 -->
@@ -43,6 +43,9 @@
<!-- myDomMove -->
<script src="./js/move.js"></script>
+ <!-- sha1加密 -->
+ <!-- <script src="./js/sha1.js"></script> -->
+
</head>
<body>
@@ -91,9 +94,9 @@
<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 class="f-m-o-center">{{seedata.alarmType}}&&{{seedata.id}}</div>
</div>
<el-divider></el-divider>
<div class="f-m-once">
@@ -104,12 +107,64 @@
<div class="f-m-o-center">{{seedata.bz}}</div>
</div>
<div class="but">
- <div class="buta">
+ <div class="buta" @click="shipingClick(true)">
<img class="b-b-img" src="./img/shiping.png" alt="">
</div>
- <div class="butb">结果反馈</div>
+ <!-- 加上display： none不会闪烁 -->
+ <div class="shipingPopup" v-show="shipingPopupShow" style="display: none;">
+ <div class="s-p-main">
+ <div @click="shipingClick(false)">
+ <img src="./img/gaunbi.png" alt="" class="s-p-gaunbi">
+ </div>
+ <!-- <video style="height: 550px; width: 100%" controls="controls"
+ id="real_video_shipingPopup" src=""></video> -->
+ <video style="height: 550px; width: 100%" controls="controls" :src="shipingM3u8Url"></video>
+ </div>
+ </div>
+ <div class="butb" @click="resultFeedbackClick">结果反馈</div>
+ <!-- 加上display： none不会闪烁 -->
+ <!-- <div class="resultFeedback" v-show="resultFeedbackPopupShow" style="display: none;">
+ <div class="b-r-main">
+ <div @click="resultFeedbackClick">
+ <img src="./img/gaunbi.png" alt="" class="s-p-gaunbi">
+ </div>
+ <div class="b-r-main-in">
+ <div class="b-r-m-i-once">
+ <div class="b-r-m-i-o-title">
+ 警情反馈:
+ </div>
+ <div class="b-r-m-i-o-center">
+ <textarea rows="9" cols="27" placeholder="请输入警情反馈。"></textarea>
+ </div>
+ </div>
+ <div class="b-r-m-i-once b-r-i-o-ups">
+ <div class="b-r-m-i-o-title">
+ 照片上传:
+ </div>
+ <div class="b-r-m-i-o-center">
+ <img class="b-r-m-i-o-c-img" src="./img/xiangji.png" alt="">
+ <div>2522</div>
+ </div>
+ </div>
+ <el-divider></el-divider>
+ <div class="b-r-m-i-once b-r-i-o-ups">
+ <div class="b-r-m-i-o-title">
+ 视频上传:
+ </div>
+ <div class="b-r-m-i-o-center">
+ <img class="b-r-m-i-o-c-img" src="./img/shiping11.png" alt="">
+ <div>2522</div>
+ </div>
+ </div>
+ <div class="butb b-r-m-but" @click="upData">结果反馈</div>
+ </div>
+ </div>
+ </div> -->
<div class="butc">
<img class="b-b-img" src="./img/huifang.png" alt="">
+ <!-- <div class="huifangPopup">
+ 回放
+ </div> -->
</div>
</div>
</div>
--
Gitblit v1.9.3