南昌市物联网技防平台-前端
shuishen
2021-04-23 8d837b97ffb27e4e26f067c1febde353bfdf91cf
src/views/realTimePolice/real.vue
@@ -1,9 +1,3 @@
/*
 * @Author: Morpheus
 * @Date: 2021-03-17 15:21:33
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-03-29 10:19:55
 */
<template>
  <basic-container>
    <avue-crud
@@ -19,6 +13,7 @@
      @row-save="rowSave"
      :before-open="beforeOpen"
      :row-style="rowStyle"
      row-class-name="tabFontSize"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
@@ -43,7 +38,7 @@
      <template slot="menuLeft">
        <el-button
          v-bind:class="activeClass == 0 ? 'btn-color' : ''"
          size="small"
          size="mini"
          @click="getBRdata(0)"
          >本日
        </el-button>
@@ -64,6 +59,25 @@
          size="mini"
          @click="getQBdata(3)"
          >全部
        </el-button>
      </template>
      <template slot="menuLeft">
        <el-button
          type="warning"
          size="mini"
          plain
          icon="el-icon-download"
          @click="handleExport"
          >导出
        </el-button>
        <el-button
          type="warning"
          size="small"
          plain
          icon="el-icon-pie-chart"
          @click="handleExportStatis"
          >导出报表
        </el-button>
      </template>
@@ -396,7 +410,7 @@
    </el-drawer>
  </basic-container>
</template>
<script>
import { getList, remove, update, add, getclient } from "@/api/real/real";
import { mapGetters } from "vuex";
@@ -433,13 +447,14 @@
        calcHeight: 30,
        labelWidth: "100",
        size: "mini",
        border: false,
        stripe: true,
        menuWidth: 240,
        dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 3,
        align:"center",
        border: true,
        align: "center",
        index: true,
        viewBtn: true,
        selection: true,
@@ -450,7 +465,7 @@
            prop: "waringType",
            search: false,
            searchSpan: 3,
            width: 130,
            width: 85,
            className: "waringTypeClass",
            searchPlaceholder: "请选择",
            type: "select",
@@ -465,7 +480,7 @@
          {
            label: "报警时间",
            type: "datetime",
            width: 130,
            width: 160,
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            prop: "alarmTime",
@@ -476,6 +491,7 @@
            type: "datetime",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            searchValue: [this.getStartTime(), this.getEndTime()],
            searchRange: true,
            searchSpan: 5,
            hide: true,
@@ -499,11 +515,12 @@
          {
            label: "负责人电话",
            prop: "onePhone",
            width: 96,
            width: 110,
          },
          {
            label: "报警人",
            prop: "galarmPeople",
            width: 90,
          },
          {
            label: "报警人电话",
@@ -512,7 +529,6 @@
          },
          {
            label: "事发地址",
            width: 200,
            prop: "place",
          },
          {
@@ -561,7 +577,11 @@
            cascaderItem: ["city", "district"],
            dicUrl: "/api/blade-system/region/select",
            span: 6,
            className: "cityClass1",
            className: "cityreal1",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "地市",
@@ -579,7 +599,11 @@
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 3,
            labelWidth: "0",
            className: "cityClass2",
            className: "cityreal2",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "区县",
@@ -597,11 +621,16 @@
            dicUrl: "/api/blade-system/region/select?code={{key}}",
            span: 3,
            labelWidth: "0",
            className: "cityClass3",
            className: "cityreal3",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "接警人",
            prop: "alarmPeople",
            width: 90,
          },
          {
            label: "接警时间",
@@ -610,6 +639,10 @@
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            width: 130,
            prop: "jjTime",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
        ],
      },
@@ -744,7 +777,10 @@
    },
    searchReset() {
      this.activeClass = 3;
      //清空搜索框中的内容
      this.query = {};
      //清空this.$route.query
      this.$router.push({ query: {} });
      this.onLoad(this.page);
    },
    searchChange(params, done) {
@@ -871,6 +907,14 @@
      } else {
        values = {
          ...params,
          ...this.query,
        };
      }
      if (this.$route.query.timeDesc) {
        values = {
          ...params,
          timeDesc: this.$route.query.timeDesc,
          ...this.query,
        };
      }
@@ -1084,6 +1128,26 @@
        };
      });
    },
    getStartTime() {
      if (
        this.$route.query.startTime != undefined &&
        this.$route.query.startTime != null &&
        this.$route.query.startTime != ""
      ) {
        return this.$route.query.startTime;
      }
      return "";
    },
    getEndTime() {
      if (
        this.$route.query.endTime != undefined &&
        this.$route.query.endTime != null &&
        this.$route.query.endTime != ""
      ) {
        return this.$route.query.endTime;
      }
      return "";
    },
    handleManage(row) {
      this.form = row;
      this.peopleList = [
@@ -1117,6 +1181,15 @@
        )
        .then(function () {
          that.dialogTableVisible = false;
          axios({
            method: "post",
            url: `/api/blade-jfpts/rvideo/stop`,
            params: {
              jid: row.id,
            },
          }).then((resdata) => {});
          that.onLoad(that.page, that.query);
          that.$router.push({
            path: "/policeTracking/track",
@@ -1185,6 +1258,7 @@
    },
    // 视频通话打开关闭事件
    openRealVideoBox() {
      var that = this;
      var newAxios = axios.create({
        baseURL: "https://web.byisf.com:18000",
        withCredentials: false,
@@ -1207,24 +1281,49 @@
        .then((res) => {
          newAxios
            .get(
              `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${this.form.serialNumber}&chl=${this.form.channelNumber}`
              `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${that.form.serialNumber}&chl=${this.form.channelNumber}`
            )
            .then((result) => {
              this.videoSource = result.data.data.m3u8;
              that.videoSource = result.data.data.m3u8;
              if (Hls.isSupported()) {
                var dom = document.getElementById("real_video_conversation");
                this.hls = new Hls();
                that.hls = new Hls();
                var m3u8Url = decodeURIComponent(this.videoSource);
                var m3u8Url = decodeURIComponent(that.videoSource);
                this.hls.loadSource(m3u8Url);
                that.hls.loadSource(m3u8Url);
                this.hls.attachMedia(dom);
                that.hls.attachMedia(dom);
                this.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                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;
                      default:
                        // cannot recover
                        that.hls.destroy();
                        break;
                    }
                  }
                });
              }
            });
@@ -1286,6 +1385,7 @@
          "Content-Type": "application/json;",
        },
      });
      var that = this;
      newCallAxios
@@ -1307,6 +1407,31 @@
          var newbolb = new Blob([blob], { type: "audio/pcm" });
          var fileOfBlob = new File([newbolb], new Date().getTime() + ".pcm");
          formData.append("file", fileOfBlob);
          var wavBlob = that.recorder.getWAVBlob();
          var wavformData = new FormData();
          var wavform = new File([wavBlob], new Date().getTime() + ".wav");
          wavformData.append("file", wavform);
          console.log(
            wavBlob,
            wavform,
            wavformData,
            wavformData.entries(),
            132
          );
          axios({
            method: "post",
            url: "/api/blade-jfpts/xlfeedback/xlfeedback/put-objecty",
            data: wavformData,
            params: {
              jid: that.form.id,
            },
          }).then((resdata) => {
            console.log(resdata);
          });
          newCallAxios
            .post(`/api_control`, blob, {
              params: {
@@ -1340,47 +1465,88 @@
      Recorder.getPermission().then(() => {});
      this.videoConversationReal = true;
    },
    //数据导出
    handleExport() {
      this.$confirm("是否导出实时警情数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(
          `/api/blade-jfpts/alarm/alarm/export-alarm?beginTime=${this.$route.query.startTime}&endTime=${this.$route.query.endTime}&waringType=${this.$route.query.waringType}&timeDesc=${this.$route.query.timeDesc}`
        );
      });
    },
    //数据报表导出
    handleExportStatis() {
        let beginTime =
          this.$route.query.startTime == undefined
            ? ""
            : this.$route.query.startTime;
        let endTime =
          this.$route.query.endTime == undefined
            ? ""
            : this.$route.query.endTime;
        let waringType =
          this.$route.query.waringType == undefined
            ? ""
            : this.$route.query.waringType;
        let timeDesc =
          this.$route.query.timeDesc == undefined
            ? ""
            : this.$route.query.timeDesc;
        window.open(
          `https://web.byisf.com/api/blade-report/ureport/preview?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`
        );
        //window.open(`http://localhost:8108/ureport/excel?_u=blade-alarm.statis.ureport.xml&beginTime=${beginTime}&endTime=${endTime}&waringType=${waringType}&timeDesc=${timeDesc}`);
    }
  },
};
</script>
<style>
.el-card__body .waringTypeClass {
  width: 12%;
}
.cityreal2 div label,.cityreal3 div label {
  display: none;
}
/*页面样式*/
.el-card__body .cityClass1 {
  width: 155px;
.el-card__body .cityreal1 {
  width: 150px;
  padding-right: 0px !important;
}
.el-card__body .cityClass2 {
.el-card__body .cityreal2 {
  width: 100px;
  padding-left: 0px !important;
  padding-left: 10px !important;
  padding-right: 0px !important;
}
.el-card__body .cityClass3 {
.el-card__body .cityreal3 {
  width: 100px;
  padding-left: 0px !important;
  padding-left: 10px !important;
  padding-right: 0px !important;
}
/*新增窗体样式*/
.el-dialog .cityClass1 {
  width: 220px;
.el-dialog .cityreal1 {
  width: 216px;
  padding-right: 0px !important;
}
.el-dialog .cityClass2 {
  width: 110px;
  padding-left: 5px !important;
  padding-right: 5px !important;
.el-dialog .cityreal2 {
  width: 130px;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.el-dialog .cityClass3 {
  width: 110px;
.el-dialog .cityreal3 {
  width: 105px;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
@@ -1454,4 +1620,8 @@
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}
</style>
.tabFontSize {
  font-size: 15px;
}
</style>