修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 public/map/popup/html/FlareClusterLayer_v3 copy.html

@@ -12,7 +12,10 @@
    <!-- element ui -->
    <link rel="stylesheet" href="../../lib/elementUi.css">
    <script src="../../lib/elementUi.js"></script>

    <!-- axios -->
    <script src='../../lib/axios.js'></script>
    <!-- 视频 -->
    <script src='../../../realVideo/hls.js'></script>
    <!-- layui -->
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
@@ -114,6 +117,8 @@
            justify-content: space-between;

            padding: 10px 0 10px 0;
            /* border: rgb(211, 154, 31) solid 0.5px; */

            margin-bottom: 5px;
        }

@@ -135,7 +140,7 @@
            float: left;
            margin-right: 10px;
            padding: 0 10px 0 10px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            /* border: 1px solid rgba(0, 0, 0, 0.5); */
            border-radius: 5px;
        }

@@ -143,6 +148,10 @@

            float: left;
            padding: 0 3px 0 3px;
        }

        .el-tabs__content {
            height: 360px;
        }

        .el-tabs__active-bar {
@@ -153,6 +162,10 @@
        .el-tabs__item:hover {
            color: #5d5d5d;
        }

        video::-webkit-media-controls-timeline {
            display: none;
        }
    </style>
</head>

@@ -160,7 +173,7 @@
    <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">
        <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>
@@ -169,13 +182,17 @@
                <div class="f-l-t-r-but"> <a href="#" @click="looks">查看详情</a> </div>
            </div>
        </div>
        <div class="flare-liu-body">
        <div class="flare-liu-body" v-if="'start'">
            <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">{{ deptname }}</span>
                        </div>
                        <div class="r-b-t-main">
                            <span class="r-b-t-left">设备联系人</span>
@@ -185,12 +202,12 @@
                        <!-- <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" 
                                <div
                                class="r-b-t-r-label"
                                v-for="(value,index) in labels"
                                :key="index"
                                >
                                     {{value}} 
                                     {{value}}
                                </div>
                            </span>
                        </div> -->
@@ -199,8 +216,9 @@
                            <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 style="width: 68px; height: 68px" :src="value" :preview-src-list="imgsl"
                                        v-show="value != 'no'"> -->
                                    <el-image style="width: 68px; height: 68px" :src="value" v-show="value != 'no'">
                                    </el-image>
                                    <div v-show="value == 'no'" style="
                                        width: 68px;
@@ -219,6 +237,10 @@
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="现场视频" name="second">
                    <video style="height: auto;width: 100%;" controls="controls" id="real_video_conversation" src="">
                    </video>
                </el-tab-pane>
                <!-- <el-tab-pane label="other" name="second">other</el-tab-pane> -->
            </el-tabs>
        </div>
@@ -229,16 +251,20 @@

    </script>
    <script>

        var me = new Vue({
            el: '#appliutwo',
            data: {
                num: '',
                name: '',
                statesss: '',
                // start:false,
                //详细信息data
                ourData: '',
                // names: '',
                contacts: '',
                deptname: '',//使用方
                ourd: '',//视频data
                calls: '',
                imgsl: [],
                deploymentTime: '',
@@ -251,7 +277,7 @@
            },
            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}`;
                    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) {

@@ -271,17 +297,20 @@
                            if (xhr.status === 200) {
                                // 判断isJson是否传进来了
                                var imgD = JSON.parse(xhr.responseText);// JSON转js
                                console.log(imgD)

                                // console.log(imgD)
                                var imgdatas = [];
                                if (imgD.data.length != 0) {
                                    imgdatas = imgD.data[0].paddress.split(',');
                                    if (imgD.data[0].paddress.length != 0) {
                                        imgdatas = imgD.data[0].paddress.split(',');
                                    } else {
                                        my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
                                    }
                                } else {

                                }
                                // var imgdatas = imgD.data[0].paddress.split(',');
                                my.imgsl = imgdatas.length == 0 ? ['no'] : imgdatas;
                                // my.imgsl = [ //最多3张照片 
                                // my.imgsl = [ //最多3张照片
                                //     "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",

                                //     "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
@@ -308,39 +337,214 @@
                    var ct = document.getElementsByClassName('flare-liu-top')[0];
                    var cordActive = document.getElementsByClassName('el-tabs__active-bar')[0];//滑块背景颜色

                    if (dat.state != '') {
                    // 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 = '警报';
                    //     }
                    // }
                    if (dat.dtype == 3) {
                        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 = '警报';
                        }
                    } else if (dat.dtype == 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 if (dat.dtype == 0) {
                        ct.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                        cordActive.style.backgroundImage = 'linear-gradient(to right, #CDCDCD , #CDCDCD';
                        this.statesss = '离线';

                    } else if (dat.dtype == 2) {
                        ct.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                        cordActive.style.backgroundImage = 'linear-gradient(to right, #F35B5B , #F35B5B';
                        this.statesss = '预警';
                    }


                },
                getUser(dat) {
                    var xhr = null
                        , my = this
                        , url = '/api/blade-jfpts/equipment/equipment/detail?id=' + dat;
                    // if (XMLHttpRequest) { //http请求
                    //     xhr = new XMLHttpRequest();
                    // } else {
                    //     xhr = new ActiveXObject("Microsoft.XMLHTTP");

                    // }
                    // xhr.open("get", url, true);
                    // xhr.send();
                    // xhr.onreadystatechange = function () {
                    //     if (xhr.readyState === 4) {
                    //         if (xhr.status === 200) {
                    //             // 判断isJson是否传进来了
                    //             var data = JSON.parse(xhr.responseText);// JSON转js
                    //             my.ourd = data.data;
                    //             my.deptname = my.ourd.deptName;
                    //         }
                    //     }
                    // }
                    axios.get(url).then((res) => {
                        console.log(typeof res,34234534345341)
                        var data = res;// JSON转js
                        my.ourd = data.data.data;
                        my.deptname = my.ourd.deptName;
                    })

                },
                handleClick(tab, event) {//标签tab点击事件
                    // console.log(tab, event);
                },
                  openRealVideoBox(serialNumber, channelNumber) {
                    var that = this;
                    var newAxios = axios.create({
                        baseURL: "https://web.byisf.com:18000",
                        withCredentials: false,
                        headers: {
                            "Content-type": "application/x-www-form-urlencoded",
                        },
                    });


                  if (that.ourd.manufacturers == "HK") {

                    axios({
                      method: "get",
                      url: `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?`,
                      params: {
                        number: that.ourd.deviceNumber,
                      },
                    }).then((res) => {
                      that.videoSource = res.data.data.data.url;
                      if (Hls.isSupported()) {
                        var dom = document.getElementById("real_video_conversation");
                        that.hls = new Hls();
                        var m3u8Url = decodeURIComponent(that.videoSource);
                        that.hls.loadSource(m3u8Url);
                        that.hls.attachMedia(dom);
                        that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                          dom.play();
                        });
                        that.hls.on(Hls.Events.ERROR, function (event, data) {
                          // console.log(data, 4566824159, "视频播放有问题！！！");
                          if (data.fatal) {
                            switch (data.type) {
                              case Hls.ErrorTypes.NETWORK_ERROR:
                                // try to recover network error
                                console.log(
                                  "fatal network error encountered, try to recover"
                                );
                                that.hls.startLoad();
                                break;
                              case Hls.ErrorTypes.MEDIA_ERROR:
                                console.log(
                                  "fatal media error encountered, try to recover"
                                );
                                that.hls.recoverMediaError();
                                break;
                            }
                          }
                        })
                      }
                    });


                  }else{
                    //this.form.serialNumber
                    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;
                            if (Hls.isSupported()) {
                              var dom = document.getElementById("real_video_conversation");
                              that.hls = new Hls();
                              var m3u8Url = decodeURIComponent(that.videoSource);
                              that.hls.loadSource(m3u8Url);
                              that.hls.attachMedia(dom);
                              that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                                dom.play();
                              });
                              that.hls.on(Hls.Events.ERROR, function (event, data) {
                                // console.log(data, 4566824159, "视频播放有问题！！！");
                                if (data.fatal) {
                                  switch (data.type) {
                                    case Hls.ErrorTypes.NETWORK_ERROR:
                                      // try to recover network error
                                      console.log(
                                        "fatal network error encountered, try to recover"
                                      );
                                      that.hls.startLoad();
                                      break;
                                    case Hls.ErrorTypes.MEDIA_ERROR:
                                      console.log(
                                        "fatal media error encountered, try to recover"
                                      );
                                      that.hls.recoverMediaError();
                                      break;
                                  }
                                }
                              })
                            }
                          })
                      })
                  }

                }
            },
            watch: {
                activeName() {
                    if (this.activeName == "second") {
                        this.i++;
                        this.openRealVideoBox(this.ourd.serialNumber, this.ourd.channelNumber);
                    } else {
                        var dom = document.getElementById("real_video_conversation");
                        if (dom.getAttribute("src") != "") {
                            dom.pause();
                            dom.setAttribute("src", "");
                            this.hls.destroy();
                        }
                    }
                },
            },
            mounted() {
                this.oldtime = setTimeout(() => {//需要同步数据处理，input中value在mounted中没有直接传值
                    clearTimeout(this.oldtime);
                    // console.log(this.$refs.sidIput.value)
                    this.ourData = JSON.parse(this.$refs.sidIput.value);//json对象转js对象
                    this.getUser(this.ourData.id);
                    // console.log(this.ourData);
                    this.getdatas(this.ourData);
                }, 20);
                }, 50);


            }
@@ -348,4 +552,4 @@
    </script>
</body>

</html>
</html>