地图模式设备状态修改

Administrator

2021-05-07 14e02654e0545ee69456d64aef2f35c7c219d708

 src/views/dataL/dataL.vue

@@ -18,9 +18,9 @@
                  'l-t-s-red': state == dataState[3],
                  'l-t-s-yuan': true,
                }"
              ></span
              >&nbsp
              <span>{{ state }}</span>
              ></span>

              <span>{{ " " + state }}</span>
            </div>
            <div class="t-t-time">
              <p>{{ ReportTime }}</p>
@@ -472,10 +472,13 @@
                <div class="l-m-3-main">
                  <!-- {{ videoUrl }} -->
                  <div>
                        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
                            <source id="source" :src="videoUrl" type="application/x-mpegURL"></source>
                        </video>
                    </div>
                    <video
                      style="height: 550px; width: 100%"
                      controls="controls"
                      id="real_video_conversationDataL"
                      src=""
                    ></video>
                  </div>
                </div>
              </div>
            </el-tab-pane>
@@ -586,6 +589,7 @@
  getVideo,
} from "../../api/dataL/axiosL";
import axios from "axios";
import Hls from "hls.js";
import echarts from "echarts";
import { Form } from "element-ui";
const cityOptions = ["未处理", "处理中", "已处理"];
@@ -599,6 +603,8 @@
      //折线图
      myChart: "",
      numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],

      jingqingPdianji: null,

      name: "",
      state: "",
@@ -623,7 +629,7 @@
      isRecord: true,
      screens: false,
      //复选框
      dataState: ["掉线", "在线", "故障", "预警"],
      dataState: ["掉线", "正常", "故障", "预警"],
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
@@ -984,7 +990,6 @@
          var imgdatas = [];
          if (res.data.data.length != 0) {
            imgdatas = res.data.data[0].paddress.split(",");
          } else {
          }
          // console.log(imgdatas);
          // imgdatas = [ //最多5张照片
@@ -998,41 +1003,6 @@
          setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
          this.stetDetails(data, setimgl);
        });
        var videoData = {
          deviceCode: that.a.serialNumber,
          chl: that.a.channelNumber,
        };
        // console.log(videoData);
        // getVideo(videoData).then((res) => {
        //   that.videoUrl = res

        //   console.log(res)

        // });
        var xhr2 = null, //视频请求
          url =
            "https://web.byisf.com:18000/GetPlayUrl?deviceCode=" +
            videoData.deviceCode +
            "&chl=" +
            videoData.chl;
        if (XMLHttpRequest) {
          //http请求
          xhr2 = new XMLHttpRequest();
        } else {
          xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhr2.open("get", url, true);
        xhr2.send();
        xhr2.onreadystatechange = function () {
          if (xhr2.readyState === 4) {
            if (xhr2.status === 200) {
              // 判断isJson是否传进来了
              var data2 = JSON.parse(xhr2.responseText); // JSON转js
              that.videoUrl = data2.data.m3u8;
              // console.log(videoUrl);
            }
          }
        };
      });
    },
    stetDetails(d, imgdata) {
@@ -1062,7 +1032,7 @@
      } else {
        if (j != 1) {
          if (o == 1) {
            states = "在线";
            states = "正常";
          } else {
            states = "掉线";
          }
@@ -1118,6 +1088,7 @@
        var ds = res.data.data.records;
        // console.log(ds)
        this.setdataG(ds);
        this.jingqingPdianji = ds;
      });
    },
    setdataG(d) {
@@ -1157,6 +1128,7 @@
              oneContacts: d[key].oneContacts,
              alarmPeople: d[key].alarmPeople,
              onePhone: d[key].onePhone,
              jjTime: d[key].jjTime,
              childs: [],
            });
          }
@@ -1229,16 +1201,91 @@
    },
    handleCurrentChange(val) {
      //行点击事件
      // console.log(val.i);
      var b = this.jingqingPdianji;
      for (var key in b) {
        if (b[key].jjTime == val.jjTime) {
          // console.log(b[key]);
          // this.$store.commit("SET_DATAL", this.a);
          this.$router.push({ path: "/policeTracking/track", query: b[key] });
        }
      }
      // console.log(this.$store.state)
    },
    //获取视频
    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",
        },
      });
      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_conversationDataL"
                );
                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:
                        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;
                    }
                  }
                });
              }
            });
        });
    },
  },
  created() {
    // let loadingInstance1  = Loading.service({ fullscreen: true });
    // this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
    this.a = this.$route.query;
    // console.log(this.a);
    // this.a = this.$route.query.deviceNumber == undefined? this.$store.state.dataL.dataLa : this.$route.query;
    if(this.$route.query.deviceNumber == undefined){
      this.a = this.$store.state.dataL.dataLa;
    }else{
      this.a =  this.$route.query;
    this.$store.commit("SET_DATAL", this.a);//每次都缓存在vuex中，如果没有从正确路径进来，则使用缓存
    }
    console.log(this.a);
    this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
    this.myDeviceNumber = this.$route.query.deviceNumber;
    this.myDeviceNumber = this.a.deviceNumber;
    // console.log(this.a);
    // console.log(this.myDeviceNumber);
    this.getdata();
@@ -1262,6 +1309,21 @@
        console.log(`没有找到到window.frames[0].init`);
      }
    };
  },
  watch: {
    activeName() {
      if (this.activeName == "third") {
        this.i++;
        this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber);
      } else {
        var dom = document.getElementById("real_video_conversationDataL");
        if (dom.getAttribute("src") != "") {
          dom.pause();
          dom.setAttribute("src", "");
          this.hls.destroy();
        }
      }
    },
  },
};
</script>
@@ -1674,4 +1736,7 @@
  margin-bottom: 0;
  width: 50%;
}
video::-webkit-media-controls-timeline {
  display: none;
}
</style>