yjhtgl-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" autoplay />
        <div class="video-label">
          <span class="label">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
  <Dialog v-if="showListDialog" 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="70px" label-position="left">
          <!--          <el-form-item label="实景视频" prop="eventType">-->
          <!--            <el-select-->
          <!--              v-model="queryParams.realisticVideoType"-->
          <!--              class="custom-select"-->
          <!--              popper-class="custom-select
<!--              :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="请输入摄像头名称" style="width: 200px" @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" :title="item.name">
              <span class="edit-title">{{ item.name }}</span>
              <div class="close-btn" @click="deleteItem(index)"></div>
            </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 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 autoplay :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" :style="{ zIndex: zIndex }">首页视频数量已达4个上限，如需继续操作请先取消已选择视频。</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';
import useAppStore from '@/store/modules/app';

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: 4
  }).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 appStore = useAppStore();
let zIndex = ref(999);
watch(
  showTip,
  () => {
    if (showTip.value) {
      zIndex.value = appStore.getZIndex();
    }
  },
  { immediate: true }
);
const showVideoMonitorList = () => {
  getList();
  showListDialog.value = true;
};

const getList = async () => {
  await getUserVideoPoints().then((res) => {
    selectData.value = res.data.videoInfos;
  });
  let newParams = {
    latitude: queryParams.latitude,
    longitude: queryParams.longitude,
    current: queryParams.current,
    size: queryParams.size,
    query: {
      name: queryParams.name,
      realisticVideoType: queryParams.realisticVideoType
    }
  };
  getEmergencyVideoCata(newParams).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 >= 4) {
      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: 526px;
  height: 309px;
  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: 47px;
    padding-left: 25px;
    .video-box {
      width: 237px;
      height: 116px;
      margin-right: 13px;
      cursor: pointer;
      background: url('@/assets/images/video/videoBg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px 4px 5px 5px;
      &:nth-child(1),
      &:nth-child(2) {
        margin-bottom: 10px;
      }
      &:nth-child(2),
      &:nth-child(4) {
        margin-right: 0;
      }
      .video-label {
        position: absolute;
        bottom: 5px;
        right: 3px;
        z-index: 901;
        display: flex;
        .label {
          width: 186px;
          height: 22px;
          line-height: 22px;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 5px 0 10px;
          color: #fff;
          background-color: rgba(18, 107, 248, 0.4);
          text-align: right;
        }
        &::before {
          content: '';
          width: 0;
          height: 0;
          border-bottom: 22px solid rgba(18, 107, 248, 0.4);
          border-left: 22px solid transparent;
        }
      }
    }
    :deep(.err_box) {
      align-items: flex-start;
      padding-top: 15px;
    }
  }
}
.search-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  .el-form--inline .el-form-item {
    margin-right: 15px;
  }
}
.more-btn {
  position: absolute;
  top: 22px;
  right: 8px;
  color: #00e8ff;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
}
.video-list2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
  .video-box {
    width: 288px;
    height: 200px;
    margin-right: 15px;
    cursor: pointer;
    cursor: pointer;
    background: url('@/assets/images/video/videoBg.png') no-repeat;
    background-size: 100% 100%;
    padding: 9.5px 3.8px 9px 5.5px;
    position: relative;
    margin-bottom: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:nth-child(4),
    &:nth-child(8) {
      margin-right: 0;
    }
    .video-label {
      position: absolute;
      bottom: 8px;
      right: 4px;
      z-index: 901;
      display: flex;
      .label {
        width: 186px;
        height: 24px;
        padding-right: 5px;
        line-height: 24px;
        font-size: 14px;
        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: 24px solid rgba(0, 0, 0, 0.4);
        border-left: 24px solid transparent;
      }
    }
  }
}
.img {
  width: 278.5px;
  height: 183px;
  margin-left: 1px;
  background-color: #000;
}
.active-tag {
  position: absolute;
  top: 13px;
  left: 10px;
  width: 83px;
  height: 25px;
  background: url('@/assets/images/video/indexTag.png') no-repeat;
  background-size: 100% 100%;
}
.edit-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px;
  padding: 3px 5px;
  width: 545px;
  height: 83px;
  background: url('@/assets/images/video/editBg.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 20px;
  top: 27px;
}
.box-item {
  position: relative;
  margin-left: 8px;
  &:first-child {
    margin-left: 0;
  }
  .edit-img {
    width: 65px;
    height: 65px;
    background-color: #000;
  }
  .edit-title {
    color: #fff;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 设置显示的行数 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .close-btn {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 15px;
    height: 15px;
    background: url('@/assets/images/video/close.png') no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }
}
.footer {
  height: 30px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
  .pagination-container {
    margin: 0;
  }
  :deep(.el-pagination__total) {
    color: #a7ccdf !important;
  }
  :deep(.el-pagination) {
    .btn-next,
    .btn-prev {
      background-color: transparent !important;
      border: none !important;
      .el-icon {
        color: #a7ccdf !important;
      }
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      background-color: transparent !important;
      border: none !important;
    }
    .el-pager li {
      text-align: center;
      color: #a7ccdf !important;
      background-color: #0e3064 !important;
      border: 1px solid #0c57a7 !important;
      &:hover {
        background-color: #038dff !important;
        border: 1px solid #038dff !important;
      }
    }
    .el-pager li.is-active {
      background-color: #038dff !important;
      border: 1px solid #038dff !important;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
}
.border {
  background-color: #15428d;
  width: 100%;
  height: 1px;
  margin-bottom: 30px;
}
.edit-icon {
  display: flex;
  align-items: center;
  &::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 16px;
    background: url('@/assets/images/video/setting.png') no-repeat;
    background-size: 100% 100%;
    margin-right: 10px;
  }
}
.common-checked,
.common-checked-active {
  position: absolute;
  top: 13px;
  right: 12px;
  z-index: 9;
}
:deep(.el-form) {
  .el-form-item__label {
    color: #ffffff !important;
  }
}
//.dialog {
//  :deep(.dialog-header) {
//    min-height: 150px;
//  }
//}
.common-btn-primary {
  width: 94px;
  height: 60px;
}
.common-btn {
  width: 66px;
  height: 32px;
}
</style>