ACM---线段树个人理解

本文深入讲解线段树的定义、作用、实现原理及基本操作,包括点更新、区间查询和区间更新,阐述如何利用线段树高效处理区间最值、求和等问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述 #           线段树

定义:

  线段树是一种二叉搜索树,与区间树相似,它将一个区间划分成一些单元区间,每个单元区间对应线段树中的一个叶结点。使用线段树可以快速的查找某一个节点在若干条线段中出现的次数,时间复杂度为O(logN)。而未优化的空间复杂度为2N,实际应用时一般还要开4N的数组以免越界,因此有时需要离散化让空间压缩。对于线段树中的每一个非叶子节点[a,b],它的左儿子表示的区间为[a,(a+b)/2],右儿子表示的区间为[(a+b)/2+1,b]。因此线段树是平衡二叉树,最后的子节点数目为N,即整个线段区间的长度。

作用范围:

  线段树的适用范围很广,可以在线维护修改以及查询区间上的最值,求和。更可以扩充到二维线段树(矩阵树)和三维线段树(空间树)。对于一维线段树来说,每次更新以及查询的时间复杂度为O(logN)。还支持区间修改,单点修改等操作。

实现原理:

  线段树主要是把一段大区间平均地划分成两段小区间进行维护,再用小区间的值来更新大区间。这样既能保证正确性,又能使时间保持在log级别(因为这棵线段树是平衡的)。也就是说,一个[L…R]的区间会被划分成[L…(L+R)/2]和[(L+R)/2+1…R]这两个小区间进行维护,直到L=R。但是在上述的过程中我们会遇到以下几个问题,就是我们该如何建树,建树的过程中每一个下标我们该如何去分配,分派到的每一个空间我们应该用来存放哪些数据。

在这幅图片中
  在这里我们仅对线段树中常见的区间最大值问题进行解释讨论。假设所给的区间为F[1:6] = {1, 9, 7, 8, 2, 3}。那么其对应的线段树的结构就如上图所示。其中红色的圆圈就代表线段树对应的每一个结点的下标。蓝色方框中的Max就是我们每一个结点所存放的内容,即每一个区间存放的最大值。Max下面的内容是对这个区间范围的一个说明,并不需要存放在数组中。
  仔细看这幅图我们会发现,其中结点的下标并不连续(在图中结点的标号并没有10,11)。这是因为我们在用数组对线段树进行模拟的时候,必须要提前对整个树的空间进行提前的开辟,所开辟的空间虽然并没有使用到,但是其仍然真是存在,这也是为什么我们在对数组进行开辟空间时一般会选择4n的大小以避免出现RE。
  通过观察上面的线段树结点标号我们可以发现,对于一个区间[L,R]来说,最重要的数据当然就是区间的左右端点L和R,但是大部分的情况我们并不会去存储这两个数值,而是通过递归的传参方式进行传递。这种方式用指针好实现,定义两个左右子树递归即可,按时指针表示过于繁琐,而且不方便各种操作,大部分的线段树都是使用数组进行表示,那这里怎么快速使用下标找到左右子树呢。这就会涉及到每个结点下表数字的规律。我们发现在线段树中每个非叶子结点的度都为2,且父亲节点的左右两个孩子分别存储父亲一半的区间,而每个父亲结点存放的欧式孩子的最大值,而且左孩子的下标都为偶数,右孩子的下标都是奇数且左孩子下标数+1,即:
L = Father2 (左子树下标为父亲下标的两倍)
R = Father
2+1(右子树下标为父亲下标的两倍+1)
*

k<<1(结点k的左子树下标)
k<<1|1(结点k的右子树下标)

所以建树的操作可用如下代码实现

const int maxn = 1e5+5;
const int INF = 0x3f3f3f3f;
int tree[maxn<<2],temp[maxn];//tree[]数组表示线段树数组,temp[]表示存放原始数据的数组
void Build(int l,int r,int rt){ //l,r表示当前节点区间,rt表示当前节点编号  
    if(l==r) {//若到达叶节点,即区间的左右值相等   
        tree[rt]=temp[l];//储存数组值   
        return;  
    }  
    int mid = (l+r)>>1;  //mid表示中间点
    //左右递归   
    Build(l,mid,rt<<1);  
    Build(mid+1,r,rt<<1|1);  
    tree[rt] = max(tree[rt<<1],tree[rt<<1|1];//更新信息
}  

线段树的基本操作:

一、点更新

在这里插入图片描述
  假设我们将上述的区间F[1:6] = {1, 9, 7, 8, 2, 3}中的F[3] = 7通过对其+3更改为10。那么我们应当对线段树进行如下的几个操作。

  1. 我们通过线段树的根结点向下遍历,通过叶子结点所在的区间进行查询,在每一处根结点与我们改变的值相比较,如果F[3] = 10大于当前根结点中存储的Max值,那么将Max = 10,否则不变且继续向下遍历。
  2. 直至到L=R时,即为我们改变的叶子结点,将其中存储的值变为我们上述的F[3] = 10,退出。
      具体代码实现如下:
//递归方式更新 updata(p,v,1,n,1);
void updata(int p,int v,int l,int r,int rt){    //p为下标,v为要加上的值,l,r为结点区间,rt为结点下标
    if(l == r){    //左端点等于右端点,即为叶子结点,直接加上v即可
        temp[rt] += v;
        tree[rt] += v;    //原数组和线段树数组都得到更新
        return ;
    }
    int m = l + ((r-l)>>1);    //m则为中间点,左儿子的结点区间为[l,m],右儿子的结点区间为[m+1,r]
    if(p <= m)    //如果需要更新的结点在左子树区间
        updata(p,v,l,m,rt<<1);
    else    //如果需要更新的结点在右子树区间
        updata(p,v,m+1,r,rt<<1|1);
    tree[rt] = max(tree[rt<<1],tree[rt<<1|1];    //更新父节点的值
}

二、区间查询

  线段树的每个结点存储的都是一段区间的信息 ,这就意味着如果我们刚好要查询这个区间,那么则直接返回这个结点的信息即可,比如对于上面线段树,如果我直接查询[1,6]这个区间的最值,那么直接返回根节点信息10即可,查询[1,2]直接返回9。但是有时题目中为了设置难度并不会轻易让我们查询每个结点所表示的区间。比如现在我要查询[2,5]区间的最值,这时候我们会发现并不存在某个节点的区间是[2,5],那么这时我们应该采取一些什么方法来进行区间信息的查询呢?
在这里插入图片描述

  1. 首先我们发现区间[2,5]在线段树中包括的节点有[2,2],[3,3],[4,4],[5,5],[4,5]。但是[4,4],[5,5]这两个信息的区间已经被[4,5]区间所包含,所以我们真正需要查询的结点为[2,2],[3,3],[4,5]这三个区间所在的结点。
  2. 其次从根节点开始往下递归,如果当前结点是要查询的区间的真子集,则返回这个结点的信息且不需要再往下递归。
      具体代码如下
//递归方式区间查询 query(Ld,Rd,1,n,1);
int query(int Ld,int Rd,int l,int r,int rt){    //[Ld,Rd]即为要查询的区间,l,r为结点区间,rt为结点下标
    if(Ld <= l && r <= Rd)    //如果当前结点的区间真包含于要查询的区间内,则返回结点信息且不需要往下递归
        return tree[rt];
    int ans = -INF;    //返回值变量,根据具体线段树查询的什么而自定义
    int mid = (l+r)>>1;    //m则为中间点,左儿子的结点区间为[l,m],右儿子的结点区间为[m+1,r]
    if(Ld <= m)    //如果左子树和需要查询的区间交集非空
        ans = max(ans, query(L,R,l,m,k<<1));
    if(Rd > m)    //如果右子树和需要查询的区间交集非空,注意这里不是else if,因为查询区间可能同时和左右区间都有交集
        ans = max(ans, query(L,R,m+1,r,k<<1|1));
    return ans;    //返回当前结点得到的信息
    }
}

三、区间更新

  在线段树的区间更新中我们引进了一个新的思想,Lazy_tag,字面意思就是懒惰标记的意思,实际上它的功能也就是偷懒= =,因为对于一个区间[L,R]来说,我们每次都更新区间中的每一个值,那样的话更新的复杂度将会是O(NlogN),这太高了,所以引进了Lazy_tag,这个标记一般用于处理线段树的区间更新。
  线段树在进行区间更新的时候,为了提高更新的效率,所以每次更新只更新到更新区间完全覆盖线段树结点区间为止,这样就会导致被更新结点的子孙结点的区间得不到需要更新的信息,所以在被更新结点上打上一个标记,称为lazy-tag,等到下次访问这个结点的子结点时再将这个标记传递给子结点,所以也可以叫延迟标记。
  也就是说递归更新的过程,更新到结点区间为需要更新的区间的真子集不再往下更新,下次若是遇到需要用这下面的结点的信息,再去更新这些结点,所以这样的话使得区间更新的操作和区间查询类似,复杂度为O(logN)。

void Pushdown(int rt){    //更新子树的lazy值,这里是RMQ的函数,要实现区间和等则需要修改函数内容
    if(lazy[rt]){    //如果有lazy标记
        lazy[rt<<1] += lazy[rt];    //更新左子树的lazy值
        lazy[rt<<1|1] += lazy[rt];    //更新右子树的lazy值
        t[rt<<1] += lazy[rt];        //左子树的最值加上lazy值
        t[rt<<1|1] += lazy[rt];    //右子树的最值加上lazy值
        lazy[rt] = 0;    //lazy值归0
    }
}

//递归更新区间 updata(L,R,v,1,n,1);
void updata(int Ld,int Rd,int v,int l,int r,int rt){    //[Ld,Rd]即为要更新的区间,l,r为结点区间,k为结点下标
    if(Ld <= l && r <= Rd){    //如果当前结点的区间真包含于要更新的区间内
        lazy[rt] += v;    //懒惰标记
        t[rt] += v;    //最大值加上v之后,此区间的最大值也肯定是加v
    }
    else{
        Pushdown(k);    //重难点,查询lazy标记,更新子树
        int m = l + ((r-l)>>1);
        if(Ld <= m)    //如果左子树和需要更新的区间交集非空
            update(Ld,Rd,v,l,m,rt<<1);
        if(m < Rd)    //如果右子树和需要更新的区间交集非空
            update(Ld,Rd,v,m+1,r,rt<<1|1);
        Pushup(rt);    //更新父节点
    }
}
//递归方式区间查询 query(Ld,Rd,1,n,1);
int query(int Ld,int Rd,int l,int r,int rt){    //[L,R]即为要查询的区间,l,r为结点区间,k为结点下标
    if(Ld <= l && r <= Rd)    //如果当前结点的区间真包含于要查询的区间内,则返回结点信息且不需要往下递归
        return t[rt];
    else{
        Pushdown(rt);    /**每次都需要更新子树的Lazy标记*/
        int res = -INF;    //返回值变量,根据具体线段树查询的什么而自定义
        int mid = l + ((r-l)>>1);    //m则为中间点,左儿子的结点区间为[l,m],右儿子的结点区间为[m+1,r]
        if(Ld <= m)    //如果左子树和需要查询的区间交集非空
            res = max(res, query(Ld,Rd,l,m,rt<<1));
        if(Rd > m)    //如果右子树和需要查询的区间交集非空,注意这里不是else if,因为查询区间可能同时和左右区间都有交集
            res = max(res, query(Ld,Rd,m+1,r,rt<<1|1));

        return res;    //返回当前结点得到的信息
    }
}

在沉默中爆发,在无声中绽放——xbwcj

<template> <div class="detail-container"> <!-- 索引板块卡片 --> <el-card class="index-card"> <!-- 表单区域 --> <el-form :model="formData" label-position="top" ref="indexForm" class="mobile-form" > <!-- 问卷标题 --> <el-form-item label="问卷标题:" prop="dcWjTitle"> <el-input v-model="formData.dcWjTitle" placeholder="请输入问卷标题" clearable :prefix-icon="Document" /> </el-form-item> <!-- 被测评人 --> <el-form-item label="被测评人:" prop="dcId"> <el-select v-model="formData.dcId" multiple filterable remote reserve-keyword clearable placeholder="请选择被测评人" :remote-method="searchBdr" :loading="bdrLoading" @focus="handleBdrFocus" style="width: 100%" > <el-option v-for="item in bdrOptions" :key="item.dcId" :label="item.dcName" :value="item.dcId" /> </el-select> </el-form-item> <!-- 人员部门 --> <el-form-item label="人员部门:" prop="dcDept"> <el-input v-model="formData.dcDept" placeholder="请输入人员部门" clearable :prefix-icon="OfficeBuilding" /> </el-form-item> <!-- 提交状态 --> <el-form-item label="提交状态:" prop="state"> <el-select v-model="formData.state" placeholder="请选择提交状态" clearable class="mobile-select" > <el-option label="已提交" :value="1" /> <el-option label="未提交" :value="0" /> </el-select> </el-form-item> <!-- 新增:按钮区域 --> <el-form-item class="button-group"> <el-button type="primary" @click="handleSearch" class="action-button" :icon="Search" > 搜索 </el-button> <el-button @click="handleReset" class="action-button" :icon="Refresh" > 重置 </el-button> </el-form-item> </el-form> </el-card> <!-- 数据显示板块 --> <el-card class="data-card"> <template #header> <div class="card-header"> <el-button type="primary" size="small" :icon="Refresh" @click="fetchData" > 刷新数据 </el-button> </div> </template> <!-- 数据加载 --> <div v-loading="loading" class="card-container"> <div v-for="(item, index) in tableData" :key="item.dcWjId" class="data-card-item" > <!-- 顶部:序号问卷标题 --> <div class="card-header-section"> <!-- <div class="card-id">序号{{ item.dcWjId }}</div> --> <div class="card-title">{{ item.dcWjTitle }}</div> </div> <!-- 中间:其他数据 --> <div class="card-body-section"> <div class="card-row"> <span class="card-label">被测评人:</span> <span class="card-value">{{ item.dcName }}</span> </div> <div class="card-row"> <span class="card-label">部门:</span> <span class="card-value">{{ item.dcDept }}</span> </div> <div class="card-row"> <span class="card-label">创建时间:</span> <span class="card-value">{{ item.createTime }}</span> </div> <div class="card-row"> <span class="card-label">提交时间:</span> <span class="card-value">{{ item.updateTime || '-' }}</span> </div> </div> <!-- 底部:状态、得分操作按钮 --> <div class="card-footer-section"> <div class="status-container"> <el-tag :type="item.state === '1' ? 'success' : 'info'"> {{ item.state === '1' ? '已提交' : '未提交' }} </el-tag> <div class="score">总分: {{ item.score || '0' }}</div> </div> <el-button size="small" type="primary" @click="handleView(item)" class="action-btn" > 编辑/查看 </el-button> </div> </div> <!-- 空数据提示 --> <el-empty v-if="tableData.length === 0" description="暂无数据" /> </div> <!-- 分页控件 --> <div class="pagination-container"> <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size" :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange" @current-change="handlePageChange" /> </div> </el-card> </div> </template> <script setup> // 确保正确导入所有 Vue 函数 import { ref, reactive, onMounted, onUnmounted } from 'vue'; import axios from 'axios'; import { Document, User, OfficeBuilding, Search, Refresh } from '@element-plus/icons-vue'; import { ElMessage } from 'element-plus'; import { useRouter } from 'vue-router'; const router = useRouter(); // 环境变量管理API地址 const API_BASE = import.meta.env.VITE_API_BASE || 'http://172.26.26.43/dev-api'; const API_URL = `${API_BASE}/wjdc/wj/listTx`; const BDR_API_URL = `${API_BASE}/wjdc/wj/getBdrList`; // 被测评人相关数据 const bdrOptions = ref([]); // 被测评人选项列表 const bdrLoading = ref(false); // 加载状态 const bdrCache = ref([]); // 缓存所有被测评人数据 // 表单数据 const formData = reactive({ dcWjTitle: '', dcId: [], dcDept: '', state: null }); // 表格数据 const tableData = ref([]); const loading = ref(false); // 分页配置 const pagination = reactive({ current: 1, size: 10, total: 0 }); // 表单引用 const indexForm = ref(null); // 请求取消令牌 let cancelTokenSource = axios.CancelToken.source(); // 处理被测评人输入框获取焦点 const handleBdrFocus = () => { if (bdrCache.value.length === 0) { fetchBdrList(''); } }; // 获取被测评人列表 const fetchBdrList = async (keyword = '') => { const token = getAuthToken(); if (!token) return; bdrLoading.value = true; try { const response = await axios.get(BDR_API_URL, { headers: { 'Authorization': `Bearer ${token}` } }); // 判断返回的数据是否是数组 if (Array.isArray(response.data)) { // 缓存所有数据 bdrCache.value = response.data; // 根据关键字过滤 if (keyword) { const searchTerm = keyword.toLowerCase(); bdrOptions.value = bdrCache.value.filter(item => item.dcName && item.dcName.toLowerCase().includes(searchTerm) ).slice(0, 10); // 最多显示10条 } else { // 未输入关键字时显示前10条 bdrOptions.value = bdrCache.value.slice(0, 10); } } else { // 如果不是数组,则按照原有格式处理(假设有codedata) if (response.data && response.data.code === 200) { bdrCache.value = response.data.data || []; // 同样的过滤逻辑 if (keyword) { const searchTerm = keyword.toLowerCase(); bdrOptions.value = bdrCache.value.filter(item => item.dcName.toLowerCase().includes(searchTerm) ).slice(0, 10); } else { bdrOptions.value = bdrCache.value.slice(0, 10); } } else { const msg = response.data?.msg || '返回数据格式不正确'; ElMessage.error('获取被测评人列表失败: ' + msg); } } } catch (error) { console.error('获取被测评人列表失败:', error); ElMessage.error('获取被测评人列表失败'); } finally { bdrLoading.value = false; } }; // 搜索被测评人(防抖) let searchBdrTimer = null; const searchBdr = (query) => { if (searchBdrTimer) clearTimeout(searchBdrTimer); searchBdrTimer = setTimeout(() => { if (bdrCache.value.length === 0) { fetchBdrList(query); } else { // 本地过滤 if (query) { const searchTerm = query.toLowerCase(); bdrOptions.value = bdrCache.value.filter(item => item.dcName.toLowerCase().includes(searchTerm) ).slice(0, 10); } else { bdrOptions.value = bdrCache.value.slice(0, 10); } } }, 300); }; // 获取认证令牌 const getAuthToken = () => { const token = localStorage.getItem('token'); if (!token) { ElMessage.warning('请先登录'); router.push('/login'); return null; } return token; }; // 搜索按钮处理函数 - 防抖 let searchTimer = null; const handleSearch = () => { // 检查被测评人选择数量 if (formData.dcId.length > 1) { ElMessage.warning({ message: '当前只能搜索一个被测人员', duration: 3000 }); return; } if (searchTimer) clearTimeout(searchTimer); searchTimer = setTimeout(() => { pagination.current = 1; fetchData(); }, 300); }; // 重置按钮处理函数 const handleReset = () => { if (indexForm.value) { indexForm.value.resetFields(); // 确保重置后 dcId 是空数组 formData.dcId = []; } handleSearch(); }; // 编辑/查看 const handleView = (row) => { router.push({ name: 'Operation', // 路由名称 params: { id: row.dcWjId // 传递问卷ID作为参数 } }); }; // 分页大小改变 const handleSizeChange = (size) => { pagination.size = size; fetchData(); }; // 页码改变 const handlePageChange = (page) => { pagination.current = page; fetchData(); }; // 获取数据 const fetchData = async () => { // 获取认证令牌 const token = getAuthToken(); if (!token) return; // 取消之前的请求 if (cancelTokenSource) { cancelTokenSource.cancel('请求被取消'); } cancelTokenSource = axios.CancelToken.source(); loading.value = true; try { // 构造请求参数 const params = { pageNum: pagination.current, pageSize: pagination.size, ...formData, // 安全处理:确保 dcId 是数组再 join dcId: Array.isArray(formData.dcId) ? formData.dcId.join(',') : '' // 将数组转换为逗号分隔的字符串 }; // 调用API - 添加认证头 const response = await axios.get(API_URL, { params, cancelToken: cancelTokenSource.token, headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } }); // 处理响应数据 const { data } = response; if (data && data.code === 200) { // 修改点:直接使用 data.rows data.total tableData.value = data.rows || []; pagination.total = data.total || 0; // 空数据提示 if (tableData.value.length === 0) { ElMessage.info('没有找到匹配的数据'); } } else { const errorMsg = data?.msg || '未知错误'; console.error('API返回错误:', errorMsg); ElMessage.error(`请求失败: ${errorMsg}`); tableData.value = []; pagination.total = 0; } } catch (error) { // 处理认证失败 if (error.response && error.response.status === 401) { ElMessage.error('认证过期,请重新登录'); localStorage.removeItem('token'); router.push('/login'); return; } // 忽略取消请求的错误 if (!axios.isCancel(error)) { console.error('获取数据失败:', error); const errorMsg = error.response?.data?.message || '网络请求失败'; ElMessage.error(`请求失败: ${errorMsg}`); tableData.value = []; pagination.total = 0; } } finally { loading.value = false; } }; // 页面加载时获取初始数据 onMounted(() => { fetchData(); }); // 组件卸载时取消所有请求 onUnmounted(() => { if (cancelTokenSource) { cancelTokenSource.cancel('组件卸载,取消请求'); } }); </script> <style scoped> /* 移动端适配样式 */ .detail-container { padding: 12px; } /* 卡片容器样式 */ .card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 16px; padding: 8px; } /* 单个卡片样式 */ .data-card-item { background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 16px; display: flex; flex-direction: column; transition: all 0.3s ease; border: 1px solid #ebeef5; } .data-card-item:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); } /* 卡片头部(序号+标题) */ .card-header-section { padding-bottom: 12px; border-bottom: 1px solid #f0f2f5; margin-bottom: 12px; } .card-id { font-size: 14px; color: #909399; margin-bottom: 4px; } .card-title { font-size: 16px; font-weight: 600; color: #303133; line-height: 1.4; word-break: break-word; } /* 卡片主体(其他信息) */ .card-body-section { flex: 1; margin-bottom: 12px; } .card-row { display: flex; margin-bottom: 8px; font-size: 14px; } .card-label { color: #606266; min-width: 70px; text-align: right; } .card-value { color: #303133; flex: 1; word-break: break-word; } /* 卡片底部(状态+按钮) */ .card-footer-section { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f0f2f5; } .status-container { display: flex; align-items: center; gap: 8px; } .score { font-size: 14px; color: #e6a23c; font-weight: 500; } .action-btn { flex-shrink: 0; } /* 移动端响应式 */ @media (max-width: 768px) { .card-container { grid-template-columns: 1fr; } .card-row { flex-direction: column; margin-bottom: 12px; } .card-label { text-align: left; margin-bottom: 4px; font-weight: 500; } .card-footer-section { flex-direction: column; align-items: stretch; gap: 12px; } .status-container { justify-content: space-between; } } /* 添加选择器样式 */ :deep(.el-select) .el-input__inner { height: auto !important; min-height: 44px; padding: 5px 15px; } /* 标签样式 */ :deep(.el-tag) { margin: 2px 6px 2px 0; } /* 下拉菜单样式 */ :deep(.el-select-dropdown) { max-height: 300px; overflow-y: auto; } .index-card { border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .card-header { font-size: 18px; font-weight: 600; color: #1a1a1a; } .mobile-form { :deep(.el-form-item__label) { font-weight: 500; margin-bottom: 6px; } :deep(.el-input__inner) { height: 44px; border-radius: 8px; } } .mobile-select { width: 100%; :deep(.el-input__inner) { height: 44px; } } /* 按钮区域样式 */ .button-group { display: flex; gap: 12px; margin-top: 16px; } .action-button { flex: 1; height: 46px; font-size: 16px; border-radius: 8px; } /* 移动端响应式调整 */ @media (max-width: 480px) { .button-group { flex-direction: column; gap: 10px; } .action-button { width: 100%; } } </style> 帮我修改一下该页面的整体布局,使得该页面适用于移动端,而不是PC端
07-18
<template> <div :class="`${prefixCls}`"> <el-tabs v-model="tableDescIndex" editable :class="`${prefixCls}__tabs`" @tab-change="handleTabChange" @edit="handleTabsEdit" > <el-tab-pane v-for="(item, index) in routeDescTabs" :key="index" :label="item.routeAbbr" :name="index" > <template #label> <span @dblclick="handleTabDblClick(index)" class="tab-title"> <el-tooltip class="box-item" effect="dark" :content="item.lineDesc" placement="top" v-if="item.lineDesc" > {{ item.routeAbbr }} </el-tooltip> <span v-else>{{ item.routeAbbr }}</span> </span> </template> <el-table :data="item.planStopList" :class="`${prefixCls}__table`" :header-cell-style="headerCellStyle" :cell-style="cellStyle" > <el-table-column prop="sort" :label="t('lineEdit.sort')" width="90" align="center"> <template #default="scope"> <div> {{ scope.$index + 1 }} <el-icon @click="addColumnAfterRow(scope.$index)" class="add-icon"> <Plus /> </el-icon> <el-icon @click="removeRow(scope.$index)" class="add-icon"> <Delete /> </el-icon> </div> </template> </el-table-column> <el-table-column prop="stopId" :label="t('lineMapEdit.stationName')" align="center"> <template #default="scope"> <el-select v-model="scope.row.stopDesc" filterable :filter-method="handleSearch" virtual-scroll :virtual-scroll-item-size="40" :virtual-scroll-visible-items="15" v-select-loadmore="loadMoreData" placeholder="请选择或搜索" > <el-option v-for="item in visibleOptions" :key="item.stopId" :label="item.stopDesc" :value="item.stopId" /> </el-select> </template> </el-table-column> </el-table> </el-tab-pane> </el-tabs> </div> </template> <script lang="ts" setup> import { headerCellStyle, cellStyle } from '@/components/PlanningComps/common' import { Plus, Delete } from '@element-plus/icons-vue' import { ref } from 'vue' import { debounce } from 'lodash-es' import { getAllStopList } from '@/api/planning/stop/index' import { RouteTab, lineRouteInfoItem } from '@/api/planning/line/type' import { ElMessageBox } from 'element-plus' defineOptions({ name: 'RouteDesc' }) const props = defineProps<{ lineRouteInfoList: lineRouteInfoItem[] }>() const emit = defineEmits(['update:tabIndex', 'update-line-detail', 'stop-added', 'stop-deleted']) const { getPrefixCls } = useDesign() const prefixCls = getPrefixCls('route-desc') const message = useMessage() const { t } = useI18n() const tableDescIndex = ref(0) // 当前选中的选项 const routeDescTabs = ref<lineRouteInfoItem[]>([]) // 新增线路点 const wayPoint = ref([]) // 初始化响应式引用 const allOptions = ref([]) // 所有选项 const filteredOptions = ref([]) // 过滤后的选项 const currentPage = ref(1) // 当前页码 const pageSize = 50 // 每页大小 const hasMore = ref(true) // 是否还有更多数据 const isLoading = ref(false) // 加载状态 const selectKey = ref(0) const searchQuery = ref('') const loadedCount = ref(100) // 初始加载100条 // 新增对话框删除tab const handleTabsEdit = (targetName: TabPaneName | undefined, action: 'remove' | 'add') => { if (action === 'add') { ElMessageBox.prompt('Please enter the line name', 'Prompt', { confirmButtonText: 'Confirm', cancelButtonText: 'Cancel', inputPattern: /.+/, // 正则验证 inputErrorMessage: 'The input cannot be empty' }) .then(({ value }) => { const title = value.trim() routeDescTabs.value.push({ lineId: '', lineDesc: '', routeAbbr: title, planStopList: [{ stopId: '', stopDesc: '', sort: 1, lng: '', lat: '' }], routeGeometry: {} }) tableDescIndex.value = routeDescTabs.value.length - 1 handleTabChange() // lineRouteInfoItem 添加线路描述 emit('update-line-detail', routeDescTabs.value) }) .catch(() => { console.log('User cancellation') }) } else if (action === 'remove') { const tabs = routeDescTabs.value let activeName = tableDescIndex.value if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { const nextTab = tabs[index + 1] || tabs[index - 1] if (nextTab) { activeName = nextTab.name } } }) } tableDescIndex.value = activeName routeDescTabs.value = tabs.filter((tab) => tab.name !== targetName) } } // 删除 const removeTab = (targetName: string) => { const tabs = routeDescTabs.value let activeName = tableDescIndex.value if (activeName === targetName) { tabs.forEach((tab, index) => { if (tab.name === targetName) { const nextTab = tabs[index + 1] || tabs[index - 1] if (nextTab) { activeName = nextTab.name } } }) } tableDescIndex.value = activeName routeDescTabs.value = tabs.filter((tab) => tab.name !== targetName) } // 判定索引位置 const determinePositionType = (index: number) => { const stops = routeDescTabs.value[tableDescIndex.value].planStopList if (index === 0) return 'start' if (index === stops.length - 1) return 'end' return 'middle' } // 新增行index 索引(新增包含lineID站点-保存新增索引-判断位置-传递事件-构建几何请求-重绘线路) const addColumnAfterRow = (index: number) => { const newIndex = index + 1 routeDescTabs.value[tableDescIndex.value].planStopList.splice(newIndex, 0, { sort: `${newIndex + 1}`, stopId: '', stopDesc: '', lng: '', lat: '' }) // 更新所有行的 No 值 routeDescTabs.value[tableDescIndex.value].planStopList.forEach((row, i) => { row.sort = `${i + 1}` }) } // 监听删除操作后重排序 const removeRow = (index) => { if (routeDescTabs.value[tableDescIndex.value].planStopList.length <= 1) return message.warning('Only one value cannot be deleted') // 触发线路更新事件,携带被删除站点的类型信息 if (routeDescTabs.value[tableDescIndex.value].lineId != '') { emit('stop-deleted', { delectIndex: index, // 删除站点索引 positionType: determinePositionType(index) // 删除站点位置类型 }) } routeDescTabs.value[tableDescIndex.value].planStopList.splice(index, 1) // 重置编号 routeDescTabs.value[tableDescIndex.value].planStopList.forEach((row, i) => { row.sort = `${i + 1}` }) message.success('Delete successfully') } // 获取站点列表 const getAllStopsList = async () => { try { const data = (await getAllStopList()) as StopListItem[] allOptions.value = data } catch (error) { console.error('获取站点列表失败:', error) allOptions.value = [] filteredOptions.value = [] } } // 防抖远程搜索 const handleSearch = debounce( (query) => { debugger if (!query) { // filteredOptions.value = [] return } try { searchQuery.value = query.toLowerCase() } catch (error) { console.error('搜索站点失败:', error) filteredOptions.value = [] } }, 300, { leading: true, trailing: true } ) // 局部注册自定义滚动指令翻页加载 const vSelectLoadmore = { mounted(el, binding) { // 使用nextTick确保DOM渲染完成 setTimeout(() => { const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') if (SELECTWRAP_DOM) { SELECTWRAP_DOM.addEventListener('scroll', () => { // 精确计算是否滚动到底部 const isBottom = Math.ceil(SELECTWRAP_DOM.scrollTop + SELECTWRAP_DOM.clientHeight) >= SELECTWRAP_DOM.scrollHeight - 1 if (isBottom) { binding.value() // 触发绑定的加载函数 } }) } }, 100) } } // 分页加载函数 const loadMoreData = () => { if (loadedCount.value < allOptions.value.length) { loadedCount.value += 50 // 每次加载50条 } } // 动态计算可见选项(结合搜索分页) const visibleOptions = computed(() => { debugger let result = allOptions.value if (searchQuery.value) { result = result.filter((item) => item.stopDesc.toLowerCase().includes(searchQuery.value.toLowerCase()) ) } return result.slice(0, loadedCount.value) // 只返回当前加载的数据 }) // 双击修改方案名 const handleTabDblClick = (index: number) => { const currentTab = routeDescTabs.value[index] if (!currentTab) return ElMessageBox.prompt('Please enter the new line description', 'Modify the line name', { confirmButtonText: 'Confirm', cancelButtonText: 'Cancel', inputPattern: /.+/, inputErrorMessage: 'Please enter a valid line name', inputValue: currentTab.routeAbbr // 初始值为当前名称 }) .then(({ value }) => { // 更新 tab 的 lineDesc 字段 routeDescTabs.value[index].routeAbbr = value.trim() }) .catch(() => { console.log('User cancels modification') }) } const handleChangeSelectStops = (value, sort) => { console.log(value, sort, 'dddd') // debugger filteredOptions.value.some((item, index) => { if (item.stopId == value) { const tabIndex = tableDescIndex.value const stops = routeDescTabs.value[tabIndex].planStopList // // 获取新增索引 const addedIndex = sort - 1 // 获取原始 stopId // const oldStop = stops[addedIndex]?.stopId // 设置当前站点信息 routeDescTabs.value[tabIndex].planStopList[addedIndex] = { ...stops[addedIndex], stopId: item.stopId, stopDesc: item.stopDesc, lng: item.lng, lat: item.lat } // 新增及替换点的更改 if (routeDescTabs.value[tableDescIndex.value].lineId != '') { emit('stop-added', { stopIndex: addedIndex, positionType: determinePositionType(addedIndex), behindStation: addedIndex > 0 ? stops[addedIndex] : null }) } } }) } const handleTabChange = () => { emit('update:tabIndex', tableDescIndex.value) } // 计算当前选项卡的有效 stopId 数量 const validStopCount = computed(() => { const currentTab = routeDescTabs.value[tableDescIndex.value] if (!currentTab?.planStopList) return 0 return currentTab.planStopList.filter((stop) => stop.stopId).length }) // 监听站点数量变化并触发更新 watch( validStopCount, (newCount, oldCount) => { if (newCount !== oldCount) { // console.log('站点数量变化', newCount, oldCount, tableDescIndex.value, routeDescTabs.value) const currentTab = routeDescTabs.value[tableDescIndex.value] // 新增 if (currentTab && currentTab.lineId == '') { // debugger // console.log(routeDescTabs.value, 'routeDescTabs.value') emit('update-line-detail', routeDescTabs.value) } } }, { immediate: true } ) watchEffect(() => { if (props.lineRouteInfoList && props.lineRouteInfoList.length > 0) { routeDescTabs.value = [...props.lineRouteInfoList] console.log(routeDescTabs.value, 'routeDescTabs.value') } }) onBeforeMount(() => { getAllStopsList() }) onMounted(() => {}) </script> <style lang="scss" scoped> $prefix-cls: #{$namespace}-route-desc; .#{$prefix-cls} { .el-select-dropdown { max-height: 300px; } width: 458px; background: rgba(255, 255, 255, 0.7); border-radius: 4px; padding: 0px 16px; overflow-y: auto; &__tabs { height: calc(100vh - 110px); .tab-title { display: flex; align-items: center; gap: 6px; padding: 0 8px; &:hover .el-icon { opacity: 1; } .el-icon { opacity: 0; transition: opacity 0.2s; &:hover { color: #409eff; } } } } &__table { height: calc(100vh - 175px); // 表头圆角 :deep(.el-table__header) { border-radius: 6px; overflow: hidden; } // 表内容行间距 :deep(.el-table__body) { border-collapse: separate !important; border-spacing: 0 7px !important; /* 第二个值控制行间距 */ overflow: hidden !important; } // 表内容每一行的首尾单元格具有圆角效果 :deep(.el-table__body-wrapper table) { border-collapse: separate; overflow: hidden; } :deep(.el-table__body tr td:first-child), :deep(.el-table__body tr td:last-child) { position: relative; } :deep(.el-table__body tr td:first-child) { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } :deep(.el-table__body tr td:last-child) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .add-icon { opacity: 0; transition: opacity 0.2s ease; } tr:hover .add-icon { opacity: 1; cursor: pointer; margin-left: 6px; } } } </style> <style lang="scss"> $prefix-cls: #{$namespace}-route-desc; .#{$prefix-cls} { } </style> 当前页vSelectLoadmore 在搜索数据出来后无法获取到滚动事件的原因
最新发布
07-25
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值