yjhtgl-web/src/views/emergencyCommandMap/LeftSection/VideoMonitorEdit.vue

<template>
  <Dialog custom-show type="xl" title="视频监控" class="dialog" hide-footer draggable @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 prop="name">
            <el-input v-model="queryParams.name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 500px" />
          </el-form-item>
          <el-form-item label="实景视频" prop="dict_value">
            <el-select
              v-model="queryParams.dict_value"
              class="custom-select"
              popper-class="custom-select-popper"
              :teleported="false"
            >
              <el-option v-for="item in video_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </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 :dot_data="item" autoplay />
        </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 v-if="total === 0" style="width: 100%; text-align: center; font-size: 18px; font-weight: bold">暂无数据</div>
    </div>
    <div id="container" style="display: none"></div>
  </Dialog>
  <div v-if="showTip" class="danger-tip" :style="{ zIndex: zIndex }">首页视频数量已达6个上限，如需继续操作请先取消已选择视频。</div>
</template>

<script lang="ts" setup>
import { getEmergencyVideoCata, getUserVideoPoints, getVideoList, updateUserVideoPoints } from '@/api/videoMonitor';
import { deepClone } from '@/utils';
import useAppStore from '@/store/modules/app';
import useMapStore from '@/store/modules/map';
interface LngLat {
  longitude: number;
  latitude: number;
}
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: () => {
      return false;
    }
  },
  lngLat: {
    type: Object as () => LngLat
  }
});
const mapStore = useMapStore();
const emits = defineEmits(['update:modelValue']);
const proxy = getCurrentInstance()?.proxy;
const { video_type } = toRefs<any>(proxy?.useDict('video_type'));

//查看更多数据
const queryFormRef = ref();
const queryParams = reactive({
  current: 1,
  size: 8,
  dict_value: '',
  name: ''
});
let total = ref(0);
let editVideo = ref(false);
// 选中的视频
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 getList = () => {
  let newParams = {
    latitude: props.lngLat.latitude,
    longitude: props.lngLat.longitude,
    current: queryParams.current,
    size: queryParams.size,
    query: {
      name: queryParams.name
    }
  };
  if (!!queryParams.dict_value) {
    newParams.query.dict_value = queryParams.dict_value;
  }
  getEmergencyVideoCata(newParams).then((res) => {
    dialogListData.value = res.rows;
    total.value = res.total;
    if (editVideo.value && editData.value) {
      filterData(editData.value);
    }
  });
};
const getVideoInfoList = () => {
  getVideoList(queryParams).then((res) => {
    mapStore.setTrackState(res.data);
  });
};
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.dict_value = '';
  queryParams.name = '';
  emits('update:modelValue', false);
};

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

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

// 开启编辑视频
const activeEdit = () => {
  getUserVideoPoints().then((res) => {
    filterData(res.data.videoInfos);
    editData.value = deepClone(res.data.videoInfos);
    editVideo.value = true;
  });
};
const filterData = (data) => {
  data.forEach((item) => {
    for (let i = 0; i < dialogListData.value.length; i++) {
      if (item.video_code_int === dialogListData.value[i].video_code) {
        dialogListData.value[i].sort = true;
        break;
      }
    }
  });
};
// 关闭编辑
const handleCancel = () => {
  editVideo.value = false;
};
// 保存编辑
const handleSave = () => {
  const data = [];
  editData.value.forEach((item) => {
    data.push(item.video_code_int);
  });
  updateUserVideoPoints(data).then(() => {
    getList();
    handleCancel();
  });
};

onMounted(() => {
  getList();
  // getVideoInfoList();
});
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  .el-form--inline .el-form-item {
    margin-right: 15px;
  }
}
.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>