南昌市物联网技防平台-前端
zengh
2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77
src/views/dataL/dataL.vue
@@ -19,8 +19,8 @@
                  'l-t-s-yuan': true,
                }"
              ></span>
              <span>{{' ' + state }}</span>
              <span>{{ " " + state }}</span>
            </div>
            <div class="t-t-time">
              <p>{{ ReportTime }}</p>
@@ -165,7 +165,7 @@
                            </template>
                          </el-table-column>
                          <!-- <el-table-column label="跳转实时" prop="">
                          </el-table-column> -->
                        </el-table>
                      </div>
@@ -201,7 +201,7 @@
                                                prop="open">
                                                </el-table-column>
                                            </el-table>
                                        </el-form>
                                        </el-form>
                                </template>
                                </el-table-column>
                                <el-table-column
@@ -326,7 +326,7 @@
                      </el-row>
                      <el-row>
                        <el-col span="12">
                          <el-form-item label="负责人">
                          <el-form-item label="主要负责人">
                            <el-input
                              disabled="true"
                              v-model="detailsData.person"
@@ -352,7 +352,7 @@
                                                v-model="detailsData.user"
                                                autocomplete="off"
                                            ></el-input>
                                            </el-form-item>
                                            </el-form-item>
                                        </el-col> -->
                        <el-col span="12">
                          <el-form-item label="序列号">
@@ -506,12 +506,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> -->
@@ -604,6 +604,8 @@
      myChart: "",
      numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
      jingqingPdianji: null,
      name: "",
      state: "",
      evaluate: "",
@@ -627,7 +629,7 @@
      isRecord: true,
      screens: false,
      //复选框
      dataState: ["掉线", "在线", "故障", "预警"],
      dataState: ["掉线", "正常", "故障", "预警"],
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
@@ -1003,46 +1005,20 @@
        });
      });
    },
    stetDetails(d, imgdata) {
    stetDetails(c, imgdata) {
      this.name = "无数据" && this.a.deviceName;
      //设备状态
      // [grey,green,red][
      //   onlineStatus = 0,
      //   onlineStatus = 1,
      //   state!= "",
      //   jtype != 2
      //   ]
      var states,
        o = this.a.onlineStatus,
        s = this.a.state,
        j = this.a.jtype;
      // if (o == 0) {
      //   states = "掉线";
      // } else if (o == 1) {
      //   states = "在线";
      // } else if (s != "") {
      //   states = "故障";
      // } else if (j != 2) {
      //   states = "预警";
      // }
      if (s != "") {
        d = this.a.dtype;
      if (d == 0) {
        states = "掉线";
      } else if (d == 1) {
        states = "正常";
      } else if (d == 3) {
        states = "故障";
      } else {
        if (j != 1) {
          if (o == 1) {
            states = "在线";
          } else {
            states = "掉线";
          }
        } else {
          states = "预警";
        }
      } else if (d == 2) {
        states = "预警";
      }
      // console.log(o, 1000);
      // console.log(s, 1000);
      // console.log(j, 1000);
      // console.log(states, 1000);
      this.state = states;
      this.evaluate = "空气质量";
@@ -1073,7 +1049,7 @@
        installation: this.a.stime, //     安装时间
        heartbeat: this.a.heartbeat, //     心跳时间
      };
      this.form = d;
      this.form = c;
    },
    getdataG() {
      var dataG = {
@@ -1086,6 +1062,7 @@
        var ds = res.data.data.records;
        // console.log(ds)
        this.setdataG(ds);
        this.jingqingPdianji = ds;
      });
    },
    setdataG(d) {
@@ -1125,6 +1102,7 @@
              oneContacts: d[key].oneContacts,
              alarmPeople: d[key].alarmPeople,
              onePhone: d[key].onePhone,
              jjTime: d[key].jjTime,
              childs: [],
            });
          }
@@ -1183,7 +1161,7 @@
      this.startEcharts01();
    },
    getMap() {
      window.frames[0].init("DetailMap", {
      window.frames[1].init("DetailMap", {
        x: this.a.jd,
        y: this.a.wd,
      });
@@ -1197,77 +1175,144 @@
    },
    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) {
    openRealVideoBox(serialNumber, channelNumber,deviceNumber,manufacturer) {
      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;
                    }
      if (manufacturer == "HK"){
        axios
          .get(
            `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
          )
          .then((result) => {
            that.videoSource = result.data.data.data.url;
            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;
                  }
                });
              }
            });
                }
              });
            }
          });
      }else{
        var res = that.a;
        if (res.deviceName.indexOf("(象湖院区)") != -1 || res.deviceName.indexOf("(东湖院区)") != -1){
          debugger
          var dom = document.getElementById(
            "real_video_conversationDataL"
          );
          dom.src = res.netType;
          dom.play();
          return;
        }
        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;
    // 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();
@@ -1280,15 +1325,15 @@
    // this.doEvents();
    // var timel = setTimeout(() => {
    this.$refs.detailMap.onload = () => {
      // window.frames[0].init("DetailMap", {
      // window.frames[1].init("DetailMap", {
      //   x: this.a.jd,
      //   y: this.a.wd,
      // });
      if (window.frames[0].init) {
      if (window.frames[1].init) {
        this.getMap();
      } else {
        // this.re();
        console.log(`没有找到到window.frames[0].init`);
        console.log(`没有找到到window.frames[1].init`);
      }
    };
  },
@@ -1296,20 +1341,23 @@
    activeName() {
      if (this.activeName == "third") {
        this.i++;
        this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber);
      }else{
        this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber,this.a.deviceNumber,this.a.manufacturers);
      } else {
        var dom = document.getElementById("real_video_conversationDataL");
        if (dom.getAttribute("src") != "") {
        dom.pause();
        dom.setAttribute("src", "");
        this.hls.destroy();
      }
          dom.pause();
          dom.setAttribute("src", "");
          this.hls.destroy();
        }
      }
    },
  },
};
</script>
<style lang="scss" >
video::-webkit-media-controls-timeline {
            display: none;
        }
#Lour {
  width: 100%;
  font-size: 14px;
@@ -1719,6 +1767,6 @@
  width: 50%;
}
video::-webkit-media-controls-timeline {
      display: none;
    }
</style>
  display: none;
}
</style>