yjdp-web/src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

<template>
  <div class="video-card">
    <div class="common-title gradient-text">视频监控</div>
    <div class="more-btn" @click="showVideoMonitorList">查看更多</div>
    <div class="card-content video-list">
      <div v-for="(item, index) in listData" :key="index" class="video-box">
        <HKVideo :dot_data="item" :width="560" :height="256" />
        <div class="video-label">
          <span class="label">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
  <Dialog v-model="showListDialog" type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
    <div class="search-box">
      <div class="box-left">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="200px" label-position="left">
          <el-form-item label="实景视频" prop="eventType">
            <el-select
              v-model="queryParams.realisticVideoType"
              size="large"
              class="custom-select"
              popper-class="custom-select-popper"
              :teleported="false"
              placeholder="全部"
            >
              <el-option label="全部" value=""></el-option>
              <el-option v-for="item in realistic_video" key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="name">
            <el-input
              v-model="queryParams.name"
              class="custom-input2"
              placeholder="请输入摄像头名称"
              size="large"
              style="width: 500px"
              @input="getList"
            />
          </el-form-item>
          <el-form-item>
            <div class="common-btn-primary" @click="handleQuery">搜索</div>
            <div class="common-btn" @click="resetQuery">重置</div>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="!editVideo" class="common-btn-primary2 edit-icon" style="margin-top: -20px" @click="activeEdit">编辑首页视频</div>
      <div v-show="editVideo" class="edit-box">
        <div class="flex">
          <div v-for="(item, index) in editData" :key="index" class="box-item">
            <div class="edit-img">
              <span class="edit-title">{{ item.name }}</span>
              <div class="close-btn" @click="deleteItem(index)"></div>
            </div>
          </div>
          <div class="flex" style="flex-direction: column; align-items: center">
            <div class="common-btn-primary3" @click="handleSave">保存</div>
            <div class="common-btn-danger2" @click="handleCancel">取消</div>
          </div>
        </div>
      </div>
    </div>
    <div class="border"></div>
    <div class="video-list2">
      <div v-for="(item, index) in dialogListData" :key="index" class="video-box" @click="selectItem(item)">
        <div class="video-label">
          <span class="label">{{ item.name }}</span>
        </div>
        <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
          <div v-if="editVideo">
            <div v-if="item.sort" class="active-tag"></div>
            <div :class="item.sort ? 'common-checked-active' : 'common-checked'"></div>
            <div class="img"></div>
          </div>
          <HKVideo v-else :dot_data="item" />
        </div>
      </div>
    </div>
    <div class="footer">
      <pagination
        v-show="total > queryParams.size"
        v-model:page="queryParams.current"
        v-model:limit="queryParams.size"
        :total="total"
        layout="total, prev, pager, next"
        @pagination="getList"
      />
    </div>
    <div id="container" style="display: none"></div>
  </Dialog>
  <div v-if="showTip" class="danger-tip">首页视频数量已达6个上限，如需继续操作请先取消已选择视频。</div>
</template>

<script lang="ts" setup name="VideoMonitor">
import { getEmergencyVideoCata, getUserVideoPoints, getVideoListByUser, updateUserVideoPoints } from '@/api/videoMonitor';
import { deepClone } from '@/utils';
import AMapLoader from '@amap/amap-jsapi-loader';

const props = defineProps({
  longitude: String,
  latitude: String
});
const proxy = getCurrentInstance()?.proxy;
const { realistic_video } = toRefs<any>(proxy?.useDict('realistic_video'));

let listData = ref([]);
let map;
const initData = () => {
  const longitude = props.longitude ? props.longitude : 110.925176;
  const latitude = props.latitude ? props.latitude : 21.678993;
  queryParams.longitude = longitude;
  queryParams.latitude = latitude;
  getVideoListByUser({
    longitude: longitude,
    latitude: latitude,
    page: 1,
    pageSize: 6
  }).then((res) => {
    listData.value = res.rows;
  });
};

//查看更多数据
const queryFormRef = ref();
const queryParams = reactive({
  latitude: '',
  longitude: '',
  current: 1,
  size: 8,
  realisticVideoType: '',
  name: ''
});
let showListDialog = ref(false);
let total = ref(0);
let editVideo = ref(false);
// 选中的视频
let selectData = ref([]);
let editData = ref([]);
let dialogListData = ref([]);
let showTip = ref(false);
const showVideoMonitorList = () => {
  getList();
  showListDialog.value = true;
};

const getList = async () => {
  await getUserVideoPoints().then((res) => {
    selectData.value = res.data.videoInfos;
  });
  getEmergencyVideoCata(queryParams).then((res) => {
    selectData.value.forEach((item) => {
      for (let i = 0; i < res.rows.length; i++) {
        if (item.video_code_int === res.rows[i].video_code) {
          res.rows[i].sort = true;
          break;
        }
      }
    });
    dialogListData.value = res.rows;
    total.value = res.total;
  });
};
const selectItem = (item) => {
  if (editVideo.value) {
    if (editData.value.length >= 6) {
      showTip.value = true;
      setTimeout(() => {
        showTip.value = false;
      }, 2500);
    } else {
      editData.value.push(item);
    }
  }
};
const deleteItem = (index) => {
  editData.value.splice(index, 1);
};
/** 表单重置 */
const reset = () => {
  queryParams.current = 1;
  queryParams.realisticVideoType = '';
  queryParams.name = '';
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.current = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

// 开启编辑视频
const activeEdit = () => {
  editData.value = deepClone(selectData.value);
  editVideo.value = true;
};
// 关闭编辑
const handleCancel = () => {
  editVideo.value = false;
};
// 保存编辑
const handleSave = () => {
  const data = [];
  editData.value.forEach((item) => {
    data.push(item.video_code_int);
  });
  updateUserVideoPoints(data).then(() => {
    getList();
    handleCancel();
  });
};

initData();
</script>

<style lang="scss" scoped>
.video-card {
  width: 1959px;
  height: 757px;
  background: url('@/assets/images/video/videoBox1.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  animation-name: slideLeft;
  animation-duration: 1.5s;
  .video-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 120px;
    padding-left: 60px;
    .video-box {
      width: 600px;
      height: 296px;
      margin-right: 35.06px;
      cursor: pointer;
      background: url('@/assets/images/video/videoBg.png') no-repeat;
      background-size: 100% 100%;
      padding: 14.5px 15px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-child(1),
      &:nth-child(2),
      &:nth-child(3) {
        margin-bottom: 3.5px;
      }
      &:nth-child(3),
      &:nth-child(6) {
        margin-right: 0;
      }
      .video-label {
        position: absolute;
        bottom: 17px;
        right: 20px;

        display: flex;
        .label {
          width: 411px;
          height: 56px;
          line-height: 56px;
          font-size: 36px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-left: 10px;
          color: #fff;
          background-color: rgba(0, 0, 0, 0.4);
          text-align: right;
        }
        &::before {
          content: '';
          width: 0;
          height: 0;
          border-bottom: 56px solid rgba(0, 0, 0, 0.4);
          border-left: 56px solid transparent;
        }
      }
    }
  }
}
.search-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.more-btn {
  position: absolute;
  top: 55px;
  right: 25px;
  color: #00e8ff;
  font-size: 36px;
  cursor: pointer;
  z-index: 2;
}
.video-list2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  .video-box {
    width: 790px;
    height: 356px;
    margin-right: 35.06px;
    cursor: pointer;
    cursor: pointer;
    background: url('@/assets/images/video/videoBg.png') no-repeat;
    background-size: 100% 100%;
    padding: 14.5px 9px;
    position: relative;
    margin-bottom: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:nth-child(4),
    &:nth-child(8) {
      margin-right: 0;
    }
    .video-label {
      position: absolute;
      bottom: 17px;
      right: 20px;

      display: flex;
      .label {
        width: 411px;
        height: 56px;
        line-height: 56px;
        font-size: 36px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 10px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
        text-align: right;
      }
      &::before {
        content: '';
        width: 0;
        height: 0;
        border-bottom: 56px solid rgba(0, 0, 0, 0.4);
        border-left: 56px solid transparent;
      }
    }
  }
}
.img {
  width: 750px;
  height: 327px;
  background-color: #000;
}
.active-tag {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 187px;
  height: 56px;
  background: url('@/assets/images/video/indexTag.png') no-repeat;
  background-size: 100% 100%;
}
.edit-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  padding: 5px 10px;
  width: 1348px;
  height: 193px;
  background: url('@/assets/images/video/editBg.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 45px;
  top: 97px;
}
.box-item {
  position: relative;
  margin-left: 20px;
  .edit-img {
    width: 160px;
    height: 160px;
    background-color: #000;
  }
  .edit-title {
    color: #fff;
  }
  .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 33px;
    height: 33px;
    background: url('@/assets/images/video/close.png') no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }
}
.footer {
  height: 64px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
  .pagination-container {
    height: 64px;
    margin: 0;
  }
  :deep(.el-pagination__total) {
    color: #a7ccdf;
    font-size: 32px;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent;
      border: none;
      .el-icon {
        font-size: 22px;
        color: #a7ccdf;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent;
      border: none;
    }
    .el-pager li {
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 32px;
      color: #a7ccdf;
      background-color: #0e3064;
      border: 1px solid #0c57a7;
      margin: 0 6px;
      &:hover {
        background-color: #038dff;
        border: 1px solid #038dff;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff;
      border: 1px solid #038dff;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.border {
  background-color: #15428d;
  width: 100%;
  height: 4px;
  margin-bottom: 30px;
}
.edit-icon {
  display: flex;
  align-items: center;
  &::before {
    content: '';
    display: inline-block;
    width: 41px;
    height: 36px;
    background: url('@/assets/images/video/setting.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }
}
.common-checked,
.common-checked-active {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 9;
}
.dialog {
  :deep(.dialog-header) {
    min-height: 150px;
  }
}
</style>