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

<template>
  <div class="comom-title">
    <div class="title">预警列表</div>
    <div class="expand-btn" @click="changeTab">
      <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 { getPageAllList, yjzxXwyjId, tbYjxxGetInfo,yjzxyjzxSfyjSelectList,yjzxZhyjSelectList } from '@/api/yj.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(['01', '02', '03', '04']);
const yjLx = ref(['01']);
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);
  emitter.on("yjDetail", (res) => {
    chooseItem(res)
  })
})
// 复选框切换
function changeData(val) {
  pageNum.value = 1;
  personList.value = [];
  checkData.hasChoose = val;
  let ids = [];
  val.forEach(it => {
    if (it == '一级') ids.push('01');
    if (it == '二级') ids.push('02');
    if (it == '三级') ids.push('03');
    if (it == '四级') ids.push('04');
  });
  yjJb.value = ids
  if (val.length == 0) personList.value = [];
  else getList();
}
const typeS = ref(true)
function changeDatas(val) {
  pageNum.value = 1;
  personList.value = [];
  checkDatas.hasChoose = val;
  let ids = [];
  if (val.includes('布控')) {
    typeS.value = true
    yjJb.value = ['01', '02', '03', '04']
  } else {
    yjJb.value = []
    typeS.value = false
  }
  val.forEach(it => {
    if (it == '布控') {
      ids.push('01')
      typeS.value = true
    };
    if (it == '行为') ids.push('02');
    if (it == '身份') ids.push('03');
    if (it == '组合') ids.push('04');
  });
  yjLx.value = ids
  if (val.length == 0) personList.value = [];
  else getList();
}
const isExpanded = ref(false); // 控制展开/收缩状态

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 ORDIMG = 'https://89.40.7.122:38496/image'
const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
const getList = (type) => {
  let data = { pageSize: 30, pageCurrent: pageNum.value, yjjbList: yjJb.value, yjlxList: yjLx.value };
  loading.value = !type ? true : false;
  getPageAllList(data).then(res => {
    loading.value = false;
    let arr = res.records.map(item => {
      return {
        ...item,
        yjtp:item.yjlx=='01'? item.yjtp.replace(ORDIMG, IMGYM) : item.yjtp
      }
    }) || [];
    personList.value = pageNum.value == 1 ? arr : personList.value.concat(arr);
    total.value = res.total;
  }).catch(() => {
    loading.value = false;
  })
}
const content = ref({
  ryxm: "",
  rysfzh: "",
  yjsj: "",
  yjdz: "",
  yjtp: "",
  yjnr: "",
  jd: 0,
  wd: 0,
  yjbq: "",
  yjjb: "",
  yjlx: "",
  ssbmdm: "",
  ssbm: "",
  yjlb: "",
  cph: "",
  hplx: null
})
const chooseItem = (item) => {
    console.log(item.yjlx);
  switch (item.yjlx) {


    case '01':
      tbYjxxGetInfo(item.id).then(res => {
        content.value = {
          id: item.id,
          ryxm: res.yjRyxm || '',
          rysfzh: res.yjRysfzh,
          yjsj: res.yjSj || '',
          yjdz: res.yjDz || '',
          yjtp: res.yjXtp .replace(ORDIMG, IMGYM) || '',
          yjnr: res.yjNr || '',
          yjbq: res.yjbqmc || '',
          yjlx: item.yjlx || '',
          jd: res.jd || 0,
          wd: res.wd || 0,
          yjjb: item.yjjb || '',
          czzt: res.czzt || '',
          yjbt: res.yjBt || '',
        }
        emitter.emit('showHomeYJ', [content.value]);
      })
      break;
    case '02':
      yjzxXwyjId(item.id).then(res => {
        content.value = {
          id: item.id,
          ryxm: res.xm || '',
          rysfzh: res.sfzh,
          yjsj: res.yjsj || '',
          yjdz: "",
          yjtp: "",
          yjbq: res.xwms || '',
          yjlb: item.yjlb || '',
          czzt: res.czzt || '',
          yjbt: res.yjBt || '',
          yjlx:item.yjlx
        }
        emitter.emit('showHomeYJ', [content.value]);
      })
      break;
    case '03':

      yjzxyjzxSfyjSelectList(item.id).then(res => {
         content.value = {
          id: item.id,
          ryxm: res.xm || '',
          rysfzh: res.sfzh,
          yjsj: res.yjsj || '',
          yjdz: "",
          yjtp: "",
          yjbq: res.xwms || '',
          yjlb: item.yjlb || '',
          czzt: res.czzt || '',
           yjbt: res.yjBt || '',
             yjlx:item.yjlx
        }
        emitter.emit('showHomeYJ', [content.value]);
    })
      break;
    case '04':
      yjzxZhyjSelectList(item.id).then(res => {
         content.value = {
          id: item.id,
          ryxm: res.xm || '',
          rysfzh: res.sfzh,
          yjsj: res.yjsj || '',
          yjdz: "",
          yjtp: "",
          yjbq: res.xwms || '',
          yjlb: item.yjlb || '',
          czzt: res.czzt || '',
           yjbt: res.yjBt || '',
             yjlx:item.yjlx
        }
        emitter.emit('showHomeYJ', [content.value]);
    })
      break;
  }



}
</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>