小程序地图

liuyg

2021-05-24 d7f724edb01dfba9f2e0365c8e9769579f017de0

  小程序地图

 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; */
}

 public/xcxjingqingmap/img/gaunbi.png

 public/xcxjingqingmap/img/shiping11.png

 public/xcxjingqingmap/img/xiangji.png

 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: {
    }
})

 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>