南昌市物联网技防平台-前端
shuishen
2021-04-23 8d837b97ffb27e4e26f067c1febde353bfdf91cf
src/views/policeTracking/policeTracking.vue
@@ -2,7 +2,7 @@
  <el-row>
    <el-col :span="12">
      <div style="background: #fff; height: 100%">
        <el-card class="trackClass">
        <el-card class="trackClass" style="overflow-y: auto">
          <div
            style="margin-top: 20px"
            role="tab"
@@ -145,7 +145,7 @@
              </el-col>
              <el-col span="12">
                <el-form-item label="历史视频">
                  <el-button type="primary" @click.stop="oldVideoSatart = true"
                  <el-button type="primary" @click.stop="oldOpenVideo"
                    >视频播放
                  </el-button>
                </el-form-item>
@@ -295,6 +295,34 @@
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-phone avue-group__icon"></i>
                <h1 class="avue-group__title">对讲信息</h1>
              </div>
            </div>
          </div>
          <el-card class="audios-box">
            <m-audio
              :block="false"
              v-for="(item, index) in audios"
              :key="index"
              :src="item.address"
            ></m-audio>
          </el-card>
          <div
            style="margin-top: 20px"
            role="tab"
            aria-expanded="true"
            aria-controls="el-collapse-content-823"
            aria-describedby="el-collapse-content-823"
          >
            <div
              role="button"
              tabindex="0"
              class="el-collapse-item__header focusing is-active"
            >
              <div class="avue-group__header avue-group">
                <i class="el-icon-s-custom avue-group__icon"></i>
                <h1 class="avue-group__title">保安信息</h1>
              </div>
@@ -337,39 +365,10 @@
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="性别">
                  <el-input
                    disabled="true"
                    v-model="security.sex"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="年龄">
                  <el-input
                    disabled="true"
                    v-model="security.age"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col span="12">
                <el-form-item label="联系电话">
                  <el-input
                    disabled="true"
                    v-model="security.phone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col span="12">
                <el-form-item label="家庭住址">
                  <el-input
                    disabled="true"
                    v-model="security.address"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
@@ -407,7 +406,7 @@
            <el-input
              disabled="true"
              type="textarea"
              v-model="security.snumber"
              v-model="security.describe"
              autocomplete="off"
            ></el-input>
@@ -430,23 +429,16 @@
                  </div>
                </div>
              </div>
              <div>
              <el-card class="scene-image-box">
                <el-image
                  :src="src"
                  v-for="(item, index) in imgSrc"
                  :key="index"
                  :src="item"
                  :preview-src-list="srcList"
                  style="width: 150px; margin-left: 5px"
                  v-show="imgSrc.length > 0"
                ></el-image>
                <el-image
                  :src="src"
                  :preview-src-list="srcList"
                  style="width: 150px; margin-left: 5px"
                ></el-image>
                <el-image
                  :src="src"
                  :preview-src-list="srcList"
                  style="width: 150px; margin-left: 5px"
                ></el-image>
              </div>
                <span v-show="imgSrc.length == 0">暂无现场图片</span>
              </el-card>
            </div>
            <div class="block">
              <div
@@ -468,11 +460,13 @@
                </div>
              </div>
              <div>
                <el-image :src="src" style="width: 150px; margin-left: 5px">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <video
                  :src="feedbackVideo"
                  style="width: 100%; height: 100%; object-fit: fill"
                  controls
                  v-show="feedbackVideo != ''"
                ></video>
                <span v-show="feedbackVideo == ''">暂无现场视频</span>
              </div>
            </div>
          </div>
@@ -519,7 +513,9 @@
          id="old_video"
          style="width: 100%; height: 100%; object-fit: fill"
          controls
          v-show="vaddress != ''"
        ></video>
        <span v-show="vaddress == ''">暂无历史视频</span>
      </el-dialog>
    </el-col>
  </el-row>
@@ -527,7 +523,7 @@
<script>
import axios from "axios";
import { getclient } from "@/api/real/real";
export default {
  inject: ["reload"],
  data() {
@@ -535,21 +531,9 @@
      flag: true,
      selectOptions: [],
      receivingList: [],
      security: {
        snumber: 20018,
        sname: "金同涛",
        sex: "男",
        age: 23,
        phone: 1387975426,
        address: "江西省南昌市西湖区",
      },
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      srcList: [
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      security: {},
      imgSrc: [],
      srcList: [],
      form: {},
      itemOption: {
        menuBtn: false,
@@ -608,6 +592,8 @@
      baseUrl: "",
      oldVideoSatart: false,
      vaddress: null,
      audios: [],
      feedbackVideo: "",
    };
  },
  created() {
@@ -618,7 +604,8 @@
  },
  mounted() {
    this.getList();
    this.getAudios();
    this.getImgAndVideo();
    this.$refs.mapDiv.onload = () => {
      window.frames[0].init("AlertSecurity", {
        x: this.form.jd,
@@ -790,7 +777,9 @@
    getList() {
      var that = this;
      axios
        .get(`/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`)
        .get(
          `/api/blade-user/pages?current=1&size=9999&work_status=&deptId=${that.form.deptId}`
        )
        .then(function (res) {
          that.tableData = [];
          var i = 0;
@@ -822,6 +811,8 @@
              });
            }
          });
          console.log(that.tableData, 789, 10)
        });
    },
@@ -849,13 +840,56 @@
        this.$refs.multipleTable.clearSelection();
      }
    },
    getAudios() {
      axios({
        method: "get",
        url: "/api/blade-jfpts/avideo/list",
        params: {
          jid: this.form.id,
        },
      }).then((resdata) => {
        if (resdata.data.data.records.length > 0)
          this.audios = resdata.data.data.records;
      });
    },
    getImgAndVideo() {
      axios({
        method: "post",
        url: "/api/blade-jfpts/feedback/feedback/selectFeedEdit",
        params: {
          jid: this.form.id,
        },
      }).then((resdata) => {
        if (resdata.data.data[0].List.length > 0)
          this.security = resdata.data.data[0].List[0];
        if (resdata.data.data[0].tp.length > 0) {
          this.imgSrc = resdata.data.data[0].tp;
          this.srcList = resdata.data.data[0].tp;
        }
        if (resdata.data.data[0].sp.length > 0) {
          this.feedbackVideo = resdata.data.data[0].sp[0];
        }
      });
    },
    oldOpenVideo() {
      getclient(this.form.id).then((res) => {
        if (res.data.data.vaddress != "") {
          this.vaddress = res.data.data.vaddress;
        }
        this.oldVideoSatart = true;
        console.log(this.oldVideoSatart);
      });
    },
  },
};
</script>
<style lang="scss">
<style scoped lang="scss">
.el-col {
  height: 95%;
  height: calc(100% - 5px);
}
.trackClass {
@@ -872,4 +906,27 @@
    padding: 0 10px !important;
  }
}
.audios-box,
.scene-image-box {
  line-height: 32px !important;
  height: auto;
  max-height: 200px;
  overflow-y: auto;
  .el-card__body {
    display: flex;
    padding: 0 10px !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .x-audio-wrap.inline {
      margin: 10px;
    }
    .el-image {
      margin: 10px;
      width: 160px;
      height: 80px;
    }
  }
}
</style>