lcw

2025-10-26 12:25:50 +08:00
parent 5e18952b55
commit ea3022c3f6
617 changed files with 86322 additions and 185615 deletions
--- a/src/views/home/model/deployControl.vue
+++ b/src/views/home/model/deployControl.vue
@ -1,14 +1,24 @@
 <template>
  <div class="comom-title">
-    <span class="title">布控预警</span>
+    <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="comom-cnt zdryBox">
-    <div style="height:33px;">
+  <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" >
+    <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}"/>
+        <DeployControlItem :item="item" :dict="{ D_BZ_HPZL }" />
      </li>
      <MOSTY.Empty :show="!loading && personList.length <= 0" :imgSize="100"></MOSTY.Empty>
    </ul>
@ -21,172 +31,267 @@ 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 { 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 { 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) // 滚动元素区域
-let isAutoScrolling = true // 是否自动滚动
-const intervalId = ref(null) //定时器
-
-onMounted(()=>{
-  getList()
-  autoScroll()
-})
-onUnmounted(() => {
-  if (intervalId.value) clearInterval(intervalId.value)// 清理定时器
-  stopAutoScroll()
-})
-// 自动滚动
-const autoScroll = () => {
-  if(personList.value.length==0){return}
-  intervalId.value = setInterval(() => {
-    if (!isAutoScrolling) return
-    const scrollTableEl = scrollTableRef.value
-    scrollTableEl.scrollTop += 1 // 垂直滚动距离
-    let scrollTop = scrollTableEl.scrollTop;
-    let scrollHeight = scrollTableEl.scrollHeight;
-    let offsetHeight = Math.ceil(scrollTableEl.getBoundingClientRect().height);
-    let currentHeight = scrollTop + offsetHeight;
-    if (currentHeight >= scrollHeight) { // 到底部
-      if(personList.value.length == total.value){
-        scrollTableEl.scrollTop = 0;
-      }else{
-        pageNum.value++;
-        getList('load')
-      }
+const scrollTableRef = ref(null);
+const isAutoScrolling = ref(false);
+let scrollTimer = null;
+onMounted(() => {
+  getList();
+  // 数据加载完成后启动自动滚动
+  setTimeout(() => {
+    if (personList.value.length > 0) {
+      startAutoScroll();
    }
-  }, 100)
-}
-// 停止滚动
-const stopAutoScroll = () => {
-  isAutoScrolling = false
-}
-
-// 开始滚动
-const startAutoScroll = () => {
-  isAutoScrolling = true
-  autoScroll()
-}
-
-
+  }, 1000);
+})
 // 复选框切换
-function changeData(val){
+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);
+    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 = [];
+  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;
+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};
+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=>{
+  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(()=>{
+  }).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});
+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);
+.el-loading-mask {
+  background: rgba(0, 0, 0, 0.5);
 }
 </style>

 <style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
-.zdryBox{
+
+.zdryBox {
  background: #052249;
-  height: 100%;
-  .ryBox{
-    height: calc(100% - 33px);
+  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__label {
+  color: #fff;
 }
-::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
-  color:#00FFFF;
+
+::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__inner {
+  background: rgba(0, 144, 255, 0.2);
+  border: 1px solid #0072FF;
 }
-::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
+
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #00FFFF;
-  border-color:#00FFFF;
+  border-color: #00FFFF;
 }
-::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #00FFFF;
-  border-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__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{
+
+::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>