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

<template>
  <Dialog custom-show type="xl" title="视频监控" class="dialog" height="1330px" hide-footer draggable @close="reset">
    <div class="search-box">
      <div class="box-left">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-position="left">
          <el-form-item label="区划" prop="area" label-width="90px">
            <el-select
              v-model="treeData.area"
              class="custom-select"
              popper-class="custom-select-popper"
              :teleported="false"
              style="width: 450px; margin-left: 20px"
              @change="handleAreaChange"
            >
              <el-option v-for="item in treeData.areaList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
            <el-select
              v-model="treeData.town"
              class="custom-select"
              popper-class="custom-select-popper"
              :teleported="false"
              style="width: 450px; margin-left: 20px"
              @change="handleTownChange"
            >
              <el-option v-for="item in treeData.townList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
            <el-select
              v-model="treeData.village"
              class="custom-select"
              popper-class="custom-select-popper"
              :teleported="false"
              style="width: 450px; margin-left: 20px"
              @change="handleVillageChange"
            >
              <el-option v-for="item in treeData.villageList" :key="item.id" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="实景视频" prop="dict_value" label-width="180px">
            <el-select
              v-model="queryParams.dict_value"
              class="custom-select"
              popper-class="custom-select-popper"
              :teleported="false"
              style="width: 450px"
            >
              <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 prop="name">
            <el-input v-model="queryParams.name" class="custom-input2" placeholder="请输入摄像头名称" style="width: 720px" />
          </el-form-item>
          <el-form-item style="margin-right: 0">
            <div class="common-btn-primary" @click="handleQuery">搜索</div>
            <div class="common-btn" @click="resetQuery">重置</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div style="display: flex; justify-content: flex-end; margin-bottom: 30px; margin-top: -40px">
      <div v-show="!editVideo" class="common-btn-primary2 edit-icon" @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" style="margin-top: -25px" @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 style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center">
          <div v-if="editVideo">
            <div v-if="getCheckStatus(item.video_code)" class="active-tag"></div>
            <div :class="getCheckStatus(item.video_code) ? 'common-checked-active' : 'common-checked'"></div>
            <div class="img"></div>
            <div class="video-label">
              <span class="label">{{ item.name }}</span>
            </div>
          </div>
          <HKVideo v-else :dot_data="item" autoplay :is-index="item.sort" />
        </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: 38px; 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';
import HKVideo from '@/components/HKVideo/index2.vue';
import { getRegionalTree } from '@/api/common';

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 treeData = reactive({
  area: '',
  town: '',
  village: '',
  areaList: [],
  townList: [],
  villageList: []
});
const queryParams = reactive({
  current: 1,
  size: 8,
  dict_value: '',
  name: '',
  area: ''
});
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 = (flag?: boolean) => {
  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;
    getUserVideoPoints().then((res2) => {
      filterData(res2.data.videoInfos);
      editData.value = deepClone(res2.data.videoInfos);
    });
  });
};
const getVideoInfoList = () => {
  mapStore.setVideoPointParams({
    flag: true,
    dict_value: queryParams.dict_value
  });
};
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 = () => {
  emits('update:modelValue', false);
};

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

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  treeData.area = '';
  treeData.townList = [];
  treeData.town = '';
  treeData.villageList = [];
  treeData.village = '';
  queryParams.current = 1;
  handleQuery();
};
// 开启编辑视频
const activeEdit = () => {
  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(true);
    handleCancel();
  });
};
// 区变化
const handleAreaChange = () => {
  getAreaTreeList('townList', treeData.area);
  treeData.town = '';
  treeData.village = '';
  queryParams.area = treeData.area;
};
// 镇变化
const handleTownChange = () => {
  getAreaTreeList('villageList', treeData.town);
  treeData.village = '';
  queryParams.area = treeData.town;
};
// 村变化
const handleVillageChange = () => {
  queryParams.area = treeData.village;
};
// 获取区划树
const getAreaTreeList = (datasource, id) => {
  getRegionalTree(id).then((res) => {
    treeData[datasource] = res.data;
  });
};
const getCheckStatus = (id) => {
  let flag = false;
  for (let i = 0; i < editData.value.length; i++) {
    if (editData.value[i].video_code_int === id) {
      flag = true;
      break;
    }
  }
  return flag;
};
onMounted(() => {
  getList();
  getAreaTreeList('areaList', 2);
  getVideoInfoList();
});
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: -30px;
}
.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 16px;
    position: relative;
    margin-bottom: 25px;
    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;
      z-index: 901;
      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: space-between;
  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;
    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: 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: 15px;
}
.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>