sgxt_web/src/views/home/model/deployControl.vue

<template>
  <div class="comom-title">
    <div class="title">预警列表</div>
    <div class="expand-btn" @click="changeTab('deployControl')">
      <el-icon size="20">
        <ArrowDownBold v-if="isExpanded" />
        <ArrowUpBold v-else />
      </el-icon>
    </div>
  </div>
  <div class=" zdryBox" v-show="isExpanded">
    <div>
      <CheckBox :data="checkDatas" @changeData="changeDatas"></CheckBox>
    </div>
    <div v-if="typeS">
      <CheckBox :data="checkData" @changeData="changeData"></CheckBox>
    </div>
    <ul class="ryBox" ref="scrollTableRef" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll"
      v-loading="loading" v-infinite-scroll="loadList">
      <li v-for="item in personList" :key="item.id" @click="chooseItem(item)">
        <DeployControlItem :item="item" :dict="{ D_BZ_HPZL }" />
      </li>
      <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
    </ul>
  </div>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import { qcckPost } from "@/api/qcckApi.js";
import DeployControlItem from "@/views/home/components/deployControlItem.vue";
import * as MOSTY from "@/components/MyComponents/index";
import CheckBox from "@/components/checkBox/index.vue";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue';


const { proxy } = getCurrentInstance();
const { D_BZ_HPZL } = proxy.$dict('D_BZ_HPZL')
const checkData = reactive({
  list: ["一级", "二级", "三级", "四级"],
  hasChoose: ["一级", "二级", "三级", "四级"]
});
const checkDatas = reactive({
  list: ["布控", "行为", "身份", "组合"],
  hasChoose: ["布控", "行为", "身份", "组合"]
});
const total = ref(0);
const yjJb = ref('10,20,30,40');
const pageNum = ref(1);
const loading = ref(false); // 加载中
const personList = ref([]);
const scrollTableRef = ref(null);
const isAutoScrolling = ref(false);
let scrollTimer = null;
onMounted(() => {
  getList();
  // 数据加载完成后启动自动滚动
  setTimeout(() => {
    if (personList.value.length > 0) {
      startAutoScroll();
    }
  }, 1000);
})
// 复选框切换
function changeData(val) {
  pageNum.value = 1;
  personList.value = [];
  checkData.hasChoose = val;
  let ids = [];
  val.forEach(it => {
    if (it == '一级') ids.push(10);
    if (it == '二级') ids.push(20);
    if (it == '三级') ids.push(30);
    if (it == '四级') ids.push(40);
  });
  yjJb.value = ids.join(',')
  if (val.length == 0) personList.value = [];
  else getList();
}
const  typeS=ref(true)
function changeDatas(val) {
  console.log(val);
console.log(val.includes('布控'));

  pageNum.value = 1;
  personList.value = [];
  checkDatas.hasChoose = val;
  let ids = [];
  if (val.includes('布控')) {
    typeS.value=true
  } else {
    typeS.value=false
}
  val.forEach(it => {
    if (it == '布控') {
      ids.push(10)
      typeS.value=true
    };
    if (it == '行为') ids.push(20);
    if (it == '身份') ids.push(30);
    if (it == '组合') ids.push(40);
  });
  yjJb.value = ids.join(',')
  if (val.length == 0) personList.value = [];
  else getList();
}
const isExpanded = ref(true); // 控制展开/收缩状态

const changeTab = () => {
  // 切换展开/收缩状态
  isExpanded.value = !isExpanded.value;

  // 如果是收缩状态，停止自动滚动
  if (!isExpanded.value) {
    stopAutoScroll();
  } else if (personList.value.length > 0) {
    // 如果是展开状态并且有数据，启动自动滚动
    startAutoScroll();
  }
}
// 自动滚动函数
const autoScroll = () => {
  if (!scrollTableRef.value || !isAutoScrolling.value) return;
  const container = scrollTableRef.value;
  const speed = 1; // 滚动速度
  // 滚动容器
  container.scrollTop += speed;
  // 判断是否滚动到底部，如果是则回到顶部重新开始
  if (container.scrollTop >= container.scrollHeight - container.clientHeight - 5) {
    container.scrollTop = 0;
  }
};

// 开始自动滚动
const startAutoScroll = () => {
  if (isAutoScrolling.value || !scrollTableRef.value) return;
  isAutoScrolling.value = true;
  // 清除可能存在的定时器
  if (scrollTimer) {
    clearInterval(scrollTimer);
  }
  // 设置新的定时器，控制滚动速度
  scrollTimer = setInterval(autoScroll, 30);
};

// 停止自动滚动
const stopAutoScroll = () => {
  isAutoScrolling.value = false;
  if (scrollTimer) {
    clearInterval(scrollTimer);
    scrollTimer = null;
  }
};

onUnmounted(() => {
  // 组件卸载时清理定时器
  stopAutoScroll();
});

// 触底加载
const loadList = () => {
  if (personList.value.length == total.value) return;
  pageNum.value++;
  getList()
}

const getList = (type) => {
  let data = { pageSize: 10, pageNum: pageNum.value, yjJb: yjJb.value, bkyj: 1 };
  loading.value = !type ? true : false;
  qcckPost(data, '/mosty-gsxt/tbYjxx/getPageList').then(res => {
    loading.value = false;
    let arr = res.records || [];
    personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
    total.value = res.total;
  }).catch(() => {
    loading.value = false;
  })
}

const chooseItem = (item) => {
  emitter.emit('showHomeYJ', [item]);
  // emitter.emit('deletePointArea','home_yj_map');
  // if(!item.jd || !item.jd) return proxy.$message({ type: "warning",  message: "该预警没有坐标！" });
  // let icon = require('@/assets/point/yj.png');
  // if(item.yjjb == '20') icon = require('@/assets/point/yj1.png');
  // if(item.yjjb == '30') icon = require('@/assets/point/yj2.png');
  // if(item.yjjb == '40') icon = require('@/assets/point/yj3.png');
  // emitter.emit('addPointArea',{flag:'home_yj_map',icon,coords:[item]});
  // emitter.emit('setMapCenter',{location:[item.jd,item.wd],zoomLevel:10});
}
</script>

<style>
.el-loading-mask {
  background: rgba(0, 0, 0, 0.5);
}
</style>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.zdryBox {
  background: #052249;
  height: 560px;

  .ryBox {
    height: calc(100% - 80px);
    overflow: hidden;
    overflow-y: auto;
  }
}

::v-deep .el-checkbox {
  margin-right: 10px;
}



::-webkit-scrollbar {
  background-color: #263b70;
}

::-webkit-scrollbar-thumb {
  background-color: #146bbe;
}

::-webkit-scrollbar-track {
  background-color: #263b70;
}

::-webkit-scrollbar-corner {
  background-color: #142141;
}

::v-deep .el-checkbox__label {
  color: #fff;
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #00FFFF;
}

::v-deep .el-checkbox__inner {
  background: rgba(0, 144, 255, 0.2);
  border: 1px solid #0072FF;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #00FFFF;
  border-color: #00FFFF;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #00FFFF;
  border-color: #00FFFF;
}

::v-deep .el-checkbox__inner::after {
  border: 2px solid #000;
  border-left: 0;
  border-top: 0;
  left: 3px;
  top: 0px;
}

::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  background: #000;
}

.comom-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  // background: linear-gradient(135deg, #0072FF 0%, #00B4FF 100%);
  // border-radius: 50%;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 114, 255, 0.3);
}

.expand-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 114, 255, 0.5);
}

.expand-btn:active {
  transform: scale(0.95);
}
</style>