南昌市物联网技防平台-前端
zengh
2021-03-26 847d39af8b11a4c1f22e52ab3eb6bdcb82c8dc1a
src/views/realTimePolice/realHistory.vue
@@ -41,7 +41,14 @@
          :size="size"
          :type="type"
          @click.stop="handleStart(row)"
          >视频回放
          >实时视频
        </el-button>
        <el-button
          icon="el-icon-video-camera-solid"
          :size="size"
          :type="type"
          @click.stop="oldStartVideo(row)"
          >查看历史
        </el-button>
      </template>
    </avue-crud>
@@ -58,6 +65,27 @@
        height="600px"
      ></iframe>
    </el-drawer>
    <el-dialog
      class="old-video-dialog-box"
      width="100%"
      title="历史回放"
      :visible.sync="oldVideoSatart"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="vaddress = ''"
      append-to-body
    >
      <video
        :src="vaddress"
        muted="muted"
        autoplay="autoplay"
        loop
        id="old_video"
        style="width: 100%; height: 100%; object-fit: fill"
        controls
      ></video>
    </el-dialog>
  </basic-container>
</template>
@@ -85,7 +113,7 @@
        height: "auto",
        indexLabel: "序号",
        calcHeight: 30,
        menuWidth: 160,
        menuWidth: 240,
        size: "mini",
        labelWidth: "100",
        dialogWidth: 950,
@@ -272,6 +300,8 @@
        ],
      },
      data: [],
      oldVideoSatart: false,
      vaddress: null,
    };
  },
  computed: {
@@ -561,9 +591,45 @@
    handleAdd11() {
      this.qwe = true;
    },
    oldStartVideo(row) {
      this.vaddress = row.vaddress;
      this.oldVideoSatart = true;
    },
  },
};
</script>
<style>
.old-video-dialog-box {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  margin: auto !important;
  width: 720px !important;
  z-index: 2200 !important;
}
.old-video-dialog-box .el-dialog {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  height: 558px;
  border-radius: 10px 10px 10px 10px;
}
.old-video-dialog-box .el-dialog .el-dialog__header {
  padding-top: 10px;
}
.old-video-dialog-box .el-dialog .el-dialog__body {
  padding: 10px !important;
  height: calc(100% - 44px);
  box-sizing: border-box;
}
</style>