kd-aiot-frontend-yms/src/views/monitor/alarm-record.vue

<template>
  <div class="alarm-record-page">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <div class="search-item">
        <span class="label">设备名称</span>
        <el-select
          v-model="form.deviceIp"
          clearable
          placeholder="请选择"
          size="small"
        >
          <el-option
            v-for="item in deviceList"
            :key="item.id"
            :label="item.name"
            :value="item.configIp"
          />
        </el-select>
      </div>
      <!-- <div class="search-item">
        <span class="label">告警规则</span>
        <el-select v-model="form.ruleId" clearable placeholder="请选择" size="small">
          <el-option
            v-for="item in ruleList"
            :key="item.id"
            :label="item.ruleName"
            :value="item.id"
          />
        </el-select>
      </div> -->
      <div class="search-item">
        <span class="label">告警时间</span>
        <el-date-picker
          v-model="form.timeList"
          type="datetimerange"
          size="small"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="changeTime"
        />
      </div>
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="serachClick"
        >搜索</el-button
      >
    </div>

    <!-- 视频网格 -->
    <div
      class="video-grid"
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <div
        class="video-card"
        v-for="(item, index) in videoList"
        :key="index"
        @click="openVideo(item)"
      >
        <div class="video-player">
          <img
            v-if="item.alarmImagePath"
            :src="setFileUrl(item.alarmImagePath)"
            alt=""
          />
          <div class="play-btn">
            <i class="el-icon-caret-right"></i>
          </div>
        </div>
        <div class="video-meta">
          <span class="device-name">{{ item.basicDeviceName }}</span>
          <span class="rule-name">{{ item.alarmType }}</span>
          <span class="alarm-time">{{ item.alarmTime }}</span>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination-bar">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :current-page="pages.pageNum"
        :page-size="pages.pageSize"
        :total="pages.total"
        @current-change="current_change"
      />
    </div>

    <DialogVideo ref="DialogVideo" :width="'740px'"></DialogVideo>
  </div>
</template>

<script>
  import { recordList } from '@/api/surveillance/monitor';
  import DialogVideo from './components/DialogVideo.vue';
  import * as realTime from '@/api/isp/ispRealtime/monitor/index';

  export default {
    components: {
      DialogVideo
    },
    data() {
      return {
        ruleList: [],
        deviceList: [],
        pages: {
          pageNum: 1,
          pageSize: 12,
          total: 0
        },
        loading: false,
        videoList: [],
        form: {
          deviceIp: '',
          ruleId: '',
          timeList: null
        }
      };
    },
    created() {
      this.getData();
      realTime.listByType().then((res) => {
        this.deviceList = res;
      });
    },
    methods: {
      changeTime(e) {
        if (e) {
          this.beginDate = e[0];
          this.endDate = e[1];
        }
      },
      serachClick() {
        this.pages.pageNum = 1;
        this.getData();
      },
      setFileUrl(fileUrl) {
        let fileNames = fileUrl.split('/');
        return (
          window.location.origin +
          '/api/main/file/getFile?objectName=' +
          fileUrl +
          '&fullfilename=' +
          fileNames[fileNames.length - 1]
        );

        // return (
        //   'http://aiot.zoomwin.com.cn:51001/api/main/file/getFile?objectName=' +
        //   fileUrl +
        //   '&fullfilename=' +
        //   fileNames[fileNames.length - 1]
        // );
      },
      getData() {
        let alarmTimeStart = this.form.timeList ? this.form.timeList[0] : null;
        let alarmTimeEnd = this.form.timeList ? this.form.timeList[1] : null;
        let params = {
          pageNum: this.pages.pageNum,
          pageSize: this.pages.pageSize,
          alarmTimeStart: alarmTimeStart,
          alarmTimeEnd: alarmTimeEnd,
          deviceIp: this.form.deviceIp
        };
        this.loading = true;
        recordList(params)
          .then((res) => {
            this.pages.pageNum = res.current;
            this.pages.total = res.total;
            this.videoList = res.records || [];
          })
          .finally(() => {
            this.loading = false;
          });
      },
      openVideo(val) {
        let url = val.recordVideoPath;
        this.$refs.DialogVideo.init(
          window.location.origin + '/kd-aiot' + url,
          ''
        );
        // this.$refs.DialogVideo.init(
        //   'http://aiot.zoomwin.com.cn:51001/kd-aiot' + url,
        //   ''
        // );
      },
      current_change(val) {
        this.pages.pageNum = val;
        this.getData();
      }
    }
  };
</script>

<style lang="scss" scoped>
  .alarm-record-page {
    height: calc(100vh - 86px);
    background-color: #0d1b2a;
    padding: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .search-bar {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 15px;
      flex-shrink: 0;

      .search-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .label {
          color: #b0c4de;
          font-size: 13px;
          white-space: nowrap;
        }

        ::v-deep .el-input__inner,
        ::v-deep .el-range-input {
          background-color: #1a2b3c;
          border-color: #2a3b4c;
          color: #fff;
        }
        ::v-deep .el-range-separator {
          color: #b0c4de;
        }
        ::v-deep .el-input__icon {
          color: #b0c4de;
        }
      }

      ::v-deep .el-button--primary {
        background-color: #1a6bc9;
        border-color: #1a6bc9;
        &:hover {
          background-color: #2580e0;
          border-color: #2580e0;
        }
      }
    }

    .video-grid {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 12px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #1a6bc9;
      }
      &::-webkit-scrollbar-track {
        border-radius: 3px;
        background: rgba(26, 107, 201, 0.2);
      }

      .video-card {
        background-color: #000;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        border: 1px solid #1a2b3c;
        transition: border-color 0.2s;

        &:hover {
          border-color: #1a6bc9;
        }

        .video-player {
          flex: 1;
          position: relative;
          background-color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              color: #fff;
              font-size: 28px;
              margin-left: 4px;
            }
          }
        }

        .video-meta {
          height: 28px;
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 0 10px;
          background-color: #0a1626;
          flex-shrink: 0;
          overflow: hidden;

          span {
            font-size: 12px;
            white-space: nowrap;
          }

          .device-name {
            color: #b0c4de;
          }

          .rule-name {
            color: #8899aa;
          }

          .alarm-time {
            color: #8899aa;
            margin-left: auto;
          }
        }
      }
    }

    .pagination-bar {
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      padding-top: 15px;

      ::v-deep .el-pagination {
        .el-pagination__total {
          color: #b0c4de;
        }
        .el-pagination__jump {
          color: #b0c4de;
        }
        .el-input__inner {
          background-color: #1a2b3c;
          border-color: #2a3b4c;
          color: #fff;
        }
        .btn-prev,
        .btn-next {
          background-color: #1a2b3c;
          color: #b0c4de;
        }
        .el-pager li {
          background-color: #1a2b3c;
          color: #b0c4de;
          &.active {
            background-color: #1a6bc9;
            color: #fff;
          }
          &:hover {
            color: #fff;
          }
        }
      }
    }
  }
</style>