saber/src/views/manager/projectinfo/list.vue

<template>
  
 <el-container class="pro-container">
  <el-header class="search-box">
    <div class="search-box-item-title">
      <el-input v-model="searchForm.name" placeholder="请输入内容" clearable size="small"></el-input>
    </div>
    <div class="ml-10">
      <el-button type="primary" @click="searchChange" class="custom-primary-btn" size="small">查询</el-button>
    </div>
    <div class="ml-10">
      <el-select v-model="searchForm.status" placeholder="项目状态" style="width: 120px;" size="small" clearable>
        <el-option
          v-for="item in proStatusItems"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="ml-10">
      <el-select v-model="searchForm.sort" placeholder="默认排序" style="width: 120px;" size="small" clearable v-if="searchForm.isCollect">
        <el-option
          v-for="item in sortOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="searchForm.sort" placeholder="默认排序" style="width: 120px;" size="small" clearable v-else>
        <el-option
          v-for="item in sortOptions1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="ml-10">
      <el-button type="warning" icon="el-icon-sort" size="small" @click="sortPro">排序</el-button>
    </div>
    <div class="ml-10" @click="searchByCollect">
      <el-button type="warning" icon="el-icon-star-off" size="small" class="custom-primary-btn" v-if="!searchForm.isCollect">收藏夹</el-button>
       <el-button type="success" icon="el-icon-arrow-left" size="small" v-else>所有项目</el-button>
    </div>
  </el-header>
  
  <el-main class="main-box">
    <div class="project-list-container" v-if="projectPageList.length>0" v-loading="getPageLoading">
    
      <el-card class="project-card"   v-for="item in projectPageList"
            :key="item.id">
        <div class="card-content" @click="projectClick(item)">
                   <div class="project-top">
                      <div class="project-tag" >
                        <template v-if="item.wbsTypes.length>0 " >
                          <el-tag
                              size="small"
                              v-for="item in generateTagItems(item.wbsTypes)"
                              :key="item.label"
                              :type="item.type"
                              effect="dark"
                              class="mr-3 custom-ellipse-tag"
                              :class="`custom-tag-type-${item.type}`"
                              >
                              <i class=" el-icon-success"></i>
                              {{ item.label }}
                            </el-tag>
                        </template>
                          <el-tag effect="dark" v-else class="custom-ellipse-tag "    :class="`custom-tag-type-8`">未关联WBS</el-tag>
                      </div>
                      <div class="project-like" @click.stop="toggleLike(item)" v-loading="item.load">
                    
                        <!-- <i   v-if="item.isCollect"    style="color: red;"   src="@/assets/heart-line.svg" ></i> -->
                         <img height="16" width="16" src="@/assets/heart-fill.svg"   v-if="item.isCollect" />
                        <img height="16" width="16" src="@/assets/heart-line.svg"  v-else />
                      </div>
                    </div>
                  <div class="project-title" >
                        <el-tooltip 
                          v-if="item.projectAlias.length > 20" 
                          :content="item.projectAlias" 
                          placement="top"
                        >
                          <span>{{ item.projectAlias }}</span>
                        </el-tooltip>
                        <span v-else>{{ item.projectAlias }}</span>
                      </div>
                    <div class="project-info">
                      <div><span class="info-label"><i class="el-icon-user"></i>负责人：</span>{{ item.projectLeaderName }}</div>
                      <div><span class="info-label"><i class="el-icon-edit-outline"></i>电签类别：</span>{{ item.remarkType===1?'安心签':'东方中讯' }}</div>
                      <div><span class="info-label"><i class="el-icon-coordinate"></i>电签方式：</span>{{ item.approvalType===1?'流程审批':'平行审批' }}</div>
                    </div>
                    <div class="project-actions">
                      <el-link type="primary" size="small" @click="projectClick(item)" style="color:#2550A2">
                      
                        查看详情 <i class="el-icon-right"></i>
                      </el-link>
                    
                
                    <el-tag
                            v-for="status in proStatusItems"
                            :key="status.value"
                            :type="status.type"
                            size="small"
                            class="custom-ellipse-tag1"
                          
                            v-if="status.value === item.projectStatus"
                          >
                            {{ status.label }}
                    </el-tag>
                    </div>
        </div>
 
      </el-card>
      

      
      <!-- 其他项目卡片... -->
    </div>
    <el-empty description="暂无数据" v-else ></el-empty>
  </el-main>
  
  <el-footer class="footer-box">
    <el-pagination
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="page.currentPage"
      :total="page.total"
      :page-size="page.pageSize"
      class="transparent-pagination"
    >
    </el-pagination>
  </el-footer>
  
  <!-- 项目信息 -->
        <el-dialog
        class="project-dialog"
         
          :visible.sync="projectVisible"
          width="65%"
          append-to-body
        >
         <span slot="title">
            <i class="el-icon-s-cooperation" style="color: #2550A2;margin-right: 5px;"></i>项目信息
          </span>
          <div class="mg-b-15">
          <!-- <el-tag  size="small" type="danger"   class="custom-ellipse-tag1"   >进行中</el-tag> -->
             <el-tag
                v-for="status in proStatusItems"
                :key="status.value"
                :type="status.type"
                size="small"
                class="custom-ellipse-tag1"
                v-if="status.value === curProjiect.projectStatus"
              >
                {{ status.label }}
         </el-tag>
            <span>{{curProjiect.projectName}}</span>
        </div>
           <div class="mg-b-15">
            <span>项目配置</span>
        </div>
           <div class="flex jc-sb pd-b-10">
          
            <div >
           <el-button
              v-for="wbsBtn in wbsButtons"
              :key="wbsBtn.type"
              :style="wbsBtn.style"
              size="small"
              @click="handleWbsClick(wbsBtn.type)"
            >
              <i :class="wbsBtn.icon"></i> {{ wbsBtn.label }}
            </el-button>

             
              <el-button
                size="small"
                @click="editProject"
                style="  background-color: #2550A2;border-color: #2550A2 ;color: white;"
              
              ><i class="el-icon-edit"></i> 编辑项目信息</el-button>
              <el-button
                size="small"
                @click="addContract"
                style="  background-color: #2550A2;border-color: #2550A2 ;color: white;"
              ><i class="el-icon-circle-plus"></i> 创建新合同段</el-button>
                <el-button
                size="small"
                @click="sortContract"
                 style="  background-color: #FF7D43;border-color: #FF7D43 ;color: white;"
            
              ><i class="el-icon-sort"></i> 合同段排序</el-button>
              <el-button
                size="small"
                @click="dellProject"
                type="danger"
              ><i class="el-icon-delete"></i> 删除项目</el-button>
           
            </div>
          </div>
          <div
          class="mt-15"
            v-if="contractList.length > 0"
          >
          <el-table
              :data="contractList"
               height="400"
              style="width: 100%"
                header-cell-class-name="custom-header"
              >
              <el-table-column
                prop="contractName"
                label="合同段名称"
               >
              </el-table-column>
              <el-table-column
                prop="contractNumber"
                label="合同段编号"
                 width="140px"
              >
              </el-table-column>
              <el-table-column
                prop="contractType"
                label="合同段类型"
                width="100px"
                
                >
                  <template slot-scope="scope">
                     <el-tag  size="small" :type=" scope.row.contractType===1?'warning':scope.row.contractType===2?'primary':'success'"   class="custom-ellipse-tag1"   >{{ scope.row.contractType===1?'施工':scope.row.contractType===2?'监理':'指挥' }}</el-tag>
                  </template>
                
              </el-table-column>
                 <el-table-column
                    prop=""
                    label="合同段权限"
                  >
                    <template slot-scope="scope">
                     
                      <template v-if="scope.row.relationContractInfo && scope.row.relationContractInfo.length > 0">
                 
                        <el-tooltip 
                          v-for="(item, index) in scope.row.relationContractInfo.filter(Boolean)" 
                          :key="index"  
                          :content="item.contractName || ''" 
                          placement="top"
                        >
                          <el-tag  
                            size="small" 
                            :type="item.contractType===1?'warning':item.contractType===2?'primary':'success'"   
                            class="custom-ellipse-tag2 ellipsis-tag1"
                          >
                            {{ item.contractName || '' }}  
                          </el-tag>
                        </el-tooltip>
                      </template>
                    </template>
                  </el-table-column>
               <el-table-column
               width="180px"
                prop="address"
                label="操作">
                <template slot-scope="scope">
                  <el-link
                   type="primary"
                    size="mini"
                     @click="editContract(scope.row)">编辑合同段信息</el-link>
                  <el-link
                    size="mini"
                    type="danger"
                    class="ml-10"
                    @click="delContract(scope.row,sortOptionscope.$index)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            class="text-align-c pd-t-20"
            v-else
          >
            暂无合同段，请先创建合同段
          </div>
        </el-dialog>

        <!-- 合同段排序弹窗 -->
        <ContractSort 
         ref="contractSortRef"
         :title="sortTitle"
         :sortProLoad="sortProLoad"
        @confirm="handleSortConfirm"
      />
</el-container>

 

</template>

<script>
import { collectProject, removeProject,getProjectListPage,sortProject,sortProjectCollect,sortContract } from "@/api/manager/projectinfo";
import { findContractByProjectId, removeContractInfo } from "@/api/manager/contractinfo";
// import {getDictionary} from "@/api/system/dict";
import { mapGetters } from "vuex";
import { getStore, setStore } from "@/util/store";
import ContractSort from './ContractSort.vue'
export default {
  data () {
    return {
      showTooltip: false, // 控制 tooltip 显示
      searchForm: {
        name: '',
        status: '',
        sort:0.,
        isCollect: 1,
      },
   
      sortOptions:[
        { value: 0, label: '默认排序' },
        { value: 1, label: '收藏优先' },
        { value: 2, label: '创建时间' },
        { value: 3, label: '我负责的' },  
        
      ],
      
      sortOptions1:[
        { value: 0, label: '默认排序' },
      
        { value: 2, label: '创建时间' },
        { value: 3, label: '我负责的' },  
        
      ],
       proStatusItems: [
          { type:'info', label: '未开始',value: 0 },
          { type: 'primary', label: '配置中' ,value: 1 },
          { type: 'warning', label: '进行中' ,value: 2 },
          { type: 'success', label: '已完成' ,value: 3 },
         
       ],
      projectId: '',
      curProjiect: {},
      projectList: [],
      projectPageList: [],
      getPageLoading: false,

      projectVisible: false,
      contractList: [],

      page: {
        currentPage: 1,
        pageSize: 12,
        total: 0
      },
      wbsButtons: [
      {
        label: '质检WBS',
        type: 'quality',
        style: { 
          backgroundColor: '#3B83F6',
          borderColor: '#3B83F6',
          color: 'white'
        },
        icon: 'el-icon-s-order'
      },
      {
        label: '试验WBS',
        type: 'test',
        style: {
          backgroundColor: '#A856F8',
          borderColor: '#A856F8',
          color: 'white'
        },
         icon: 'el-icon-guide'
      },
      {
        label: '日志WBS',
        type: 'log',
        style: {
          backgroundColor: '#6367F1',
          borderColor: '#6367F1',
          color: 'white'
        },
         icon: 'el-icon-notebook-1'
      },
      {
        label: '计量WBS',
        type: 'measure',
        style: {
          backgroundColor: '#E7B214',
          borderColor: '#E7B214',
          color: 'white'
        },
         icon: 'el-icon-files'
      },
      {
        label: '征拆WBS',
        type: 'split',
        style: {
          backgroundColor: '#EC489A',
          borderColor: '#EC489A',
          color: 'white'
        },
         icon: 'el-icon-s-order'
      }
    ],
      sortContractVisible: false, // 合同段排序弹窗
      sortContractList: [],
      sortTitle: '合同段排序',
      sortProLoad: false,

    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  components: {
    ContractSort
  },
  created () {
    this.init();
    //console.log(this.userInfo)
  },
  methods: {
    init () {
      this.getProjectList();
      this.getProjectPageList();
    },
  
    searchChange () {
      this.page.currentPage = 1;
      this.getProjectPageList();
    },
  generateTagItems(wbsTypes){
       const typeToLabelMap = {
        1: '质检',
        2: '试验',
        3: '日志',
        4: '计量',
        5: '征拆',
    };
      let tagItems = [];
      wbsTypes.forEach(type => {
        // 检查type是否在映射关系中存在
        if (typeToLabelMap.hasOwnProperty(type)) {
            // 如果存在，则创建一个新的对象并添加到tagItems数组中
            tagItems.push({
                type: type,
                label: typeToLabelMap[type]
            });
        }
    });
     return tagItems;
  },
  handleWbsClick(type) {
    switch (type) {
      case 'quality':
        this.editTree();
        break;
      case 'test':
        this.testTree();
        break;
      case 'log':
        this.editLogTree();
        break;
      case 'measure':
        this.measureTree();
        break;
      case 'split':
        this.splitTree();
        break;
    }
  },
    getProjectList (callback) {
      getProjectListPage({
        current:1,
        size:999,
        ...this.searchForm

      }).then((res) => {
        this.projectList = res.data.data.records;
          callback();
      })
    },
    getProjectPageList () {
      this.getPageLoading = true;
      getProjectListPage(
      {
        ...this.searchForm,
        current: this.page.currentPage,
        size: this.page.pageSize,
      
      
      }

      ).then((res) => {
        this.getPageLoading = false;
        this.projectPageList = res.data.data.records;
        this.page.total = res.data.data.total;
      })
    },

    projectClick (item) {
   
      
      this.curProjiect = item;
      findContractByProjectId(this.curProjiect.id).then((res) => {
        this.contractList = res.data.data;
      })
      this.projectVisible = true;
    },

    handleCurrentChange (val) {
      this.getProjectPageList();
      this.page.currentPage = val;
    },



    addContract () {
      this.$router.push({
        path: '/contract/detail',
        query: { pid: this.curProjiect.id }
      });
    },
    editContract (item) {
      this.$router.push({
        path: '/contract/detail1',
        query: {
          pid: item.pid,
          cid: item.id,
          contractType: item.contractType
        }
      });
    },
    editProject () {
      this.$router.push({
        path: '/manager/projectinfo/detail',
        query: {
          id: this.curProjiect.id
        }
      });
    },
    contractDetail (item, type, contractType) {
      this.$router.push({
        path: '/contract/detail',
        query: {
          pid: item.pid,
          cid: item.id,
          type,
          contractType
        }
      })
    },
    testTree () {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateIdTrial,
          projectName:this.curProjiect.projectName,
          type: 2
        }
      });
    },
   splitTree () {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateIdLar,
          projectName:this.curProjiect.projectName,
          type: 5
        }
      });
    },
    measureTree(){
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateIdMeter,
          projectName:this.curProjiect.projectName,
          type: 3
        }
      });
    },
    editTree () {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceWbsTemplateId,
          projectName:this.curProjiect.projectName
        }
      });
    },
    editLogTree () {
      this.$router.push({
        path: '/project/tree',
        query: {
          pid: this.curProjiect.id,
          wbsid: this.curProjiect.referenceLogWbsTemplateId,
          projectName:this.curProjiect.projectName,
          type: 4
        }
      });
    },

    delContract (item, index) {
      this.$confirm('是否删除【' + item.contractName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeContractInfo(item.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.contractList.splice(index, 1);
        })
      })
    },
    dellProject () {
      if (this.contractList.length) {
        this.$message({
          type: "warning",
          message: "只能删除下面无合同段的项目!"
        });
        return;
      }

      this.$confirm('是否删除【' + this.curProjiect.projectName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeProject(this.curProjiect.id).then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          //删除后当前列表为空，且不是第一页，往前翻一页
          if(this.projectPageList.length == 1 && this.page.currentPage >1){
            this.page.currentPage--;
          }
          this.getProjectPageList();
          this.projectVisible = false;
        })
      })
    },

    getFont (type) {
      if (type == 1) {
        return '施';
      } else if (type == 2) {
        return '监';
      } else if (type == 3) {
        return '业';
      }
      return '';
    },
    getAvatarBg (type) {
      if (type == 1) {
        return { 'abg1': true };
      } else if (type == 2) {
        return { 'abg2': true };
      } else if (type == 3) {
        return { 'abg3': true };
      }
      return {};
    },
    getBg (index) {
      let num = Math.trunc(index / 4);
      if ((num % 2) === 0) {//判定条件余数为0时为偶数
        return {
          'bg1': true
        }
      } else {
        return {
          'bg2': true
        }
      }
    },
    wbsManage () {//wbs树管理按钮
      this.$router.push('/manager/privateWBS/' + 111)
    },
    //同步
    syncLedger () {
      this.$router.push('/manager/projectinfo/ledger' )
    },
    toggleLike(item){
      collectProject({projectId:item.id}).then((res) => {
         console.log(res,'res');
           item.load=false
             if(res.data.code==200){
                this.$message.success(res.data.msg)
              
                
                this.getProjectPageList();
            }else{
                this.$message.error(res.data.msg)
            }
        })
    },
    searchByCollect(){
      if(this.searchForm.isCollect){
        this.searchForm.isCollect = 0

      }else{
        this.searchForm.isCollect = 1

      }
      this.searchForm.current = 1
      this.page.currentPage = 1;

      this.getProjectPageList();
      this.getProjectList();

    },
    //合同段排序
    sortContract(){
      // this.sortContractVisible = true;
      this.sortContractList = JSON.parse(JSON.stringify(this.contractList));
     this.sortTitle = '合同段排序';

      this.$nextTick(() => {
        this.$refs.contractSortRef.show(this.sortContractList);
      });
    },
        // 处理排序确认
    handleSortConfirm(sortedList) {
 
    
  
      this.contractList = [...sortedList];
        const ids = this.contractList.map(item => item.id);
     this. saveSort(ids);

    },
   async sortPro(){

       this.getProjectList(() => {
        if(this.searchForm.isCollect === 1){
          this.sortTitle = '收藏项目排序';
        }else{
          this.sortTitle = '项目排序';
        }

        this.$nextTick(() => {
          this.sortContractList = JSON.parse(JSON.stringify(this.projectList));
          this.$refs.contractSortRef.show(this.sortContractList);
        });
      });
    },
    saveSort(ids){
      if(this.sortTitle==='项目排序'){
         this.sortProLoad= true;
          if(this.searchForm.isCollect===0){
                  sortProject(ids).then((res) => {
                    this.sortProLoad= false;
                    if(res.data.code==200){
                        this.$message.success(res.data.msg)
                      
                        
                        this.getProjectPageList();
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
          }
      }else if(this.sortTitle==='收藏项目排序'){
              sortProjectCollect(ids).then((res) => {
                    this.sortProLoad= false;
                    if(res.data.code==200){
                        this.$message.success(res.data.msg)
                      
                        
                        this.getProjectPageList();
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
      }
      else {
        
        sortContract(ids).then((res) => {
                    this.sortProLoad= false;
                    if(res.data.code==200){
                        this.$message.success(res.data.msg)
                      
                        
                        // this.getProjectPageList();
                            findContractByProjectId(this.curProjiect.id).then((res) => {
                              this.contractList = res.data.data;
                            })
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
      }


    }
  }
};
</script>

<style scoped lang="scss">
.pro-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  
  .search-box {
    // padding: 0 !important; /* 取消内边距 */
    height: auto !important; /* 取消固定高度 */
    min-height: auto !important; /* 取消最小高度 */
    display: flex;
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 允许换行 */
    
    .search-box-item-title {
      flex: 1; /* 输入框占据剩余空间 */
      min-width: 200px; /* 最小宽度 */
    }
    
    .ml-10 {
      margin-left: 10px;
   
    }
  }
  .footer-box{
    
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center;
  }
}

/* 自定义按钮样式 */
.custom-primary-btn {
  background-color: #2550A2 !important;
  border-color: #2550A2 !important;
}

/* 项目列表容器样式 */
.project-list-container {
  // display: grid;
  // grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  // gap: 20px;
  padding: 15px;
   display: flex;
  flex-wrap: wrap;
}

/* 项目卡片样式 */
.project-card {
  // cursor: pointer;
  // transition: all 0.3s ease;
  // border-radius: 8px;
    flex: 0 0 24%; /* 每行4个项目，每个项目占25%的宽度 */
  box-sizing: border-box;
  margin: 5px; /* 可选：添加一些间距 */
}
.project-card {
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  overflow: hidden; /* 确保内部容器不超出卡片 */

  .card-content {
    // width: 100%;
    height: 100%;
    // padding: 15px; /* 保持原卡片内边距 */
  }

  // 其他原有样式保持不变
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.project-top{
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px;


}
.project-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; /* 确保宽度限制 */
  margin-bottom: 5px;
}

.project-info {
  font-size: 14px;
   color: black;
 
}

.info-label {
  //font-weight: bold;
  color: black;
  display: inline-block;
  margin-bottom: 5px;

}
.project-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e6e6e6;
}

.ml-10 {
  margin-left: 10px;
}
.mr-5 {
  margin-right: 5px;
}
.mr-3 {
  margin-right: 3px;
}
.mt-15 {
  margin-top: 15px;
}
.mg-b-15 {
  margin-bottom: 15px;
}
/* 更彻底的透明效果 */

</style>
<style lang="scss">
/* 自定义按钮样式 */
.custom-primary-btn {
  background-color: #2550A2 !important;
  border-color: #2550A2 !important;
}

.el-tag.el-tag--info {
  background-color: #eee !important;
}
.ellipsis-tag {
  // max-width:220px; /* 设置最大宽度 */
  overflow: hidden;
  margin-right: 4px;

  
  .el-tag__content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.ellipsis-tag1 {
  max-width:220px; /* 设置最大宽度 */
  overflow: hidden;
  margin-right: 4px;

  
  .el-tag__content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.custom-ellipse-tag2 {
  max-width: 280px; /* 根据需要调整最大宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 4px;
     border-radius: 15px !important;
  padding: 8px 8px !important;
  margin-right: 8px !important;
  margin-bottom: 4px;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;

  border: none !important;
}

/* 确保 tooltip 的最大宽度 */
.el-tooltip__popper {
  max-width: 300px;
  word-break: break-all;
}
/* 完全透明分页样式 */
.footer-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  background: transparent;
}

/* 移除所有按钮和页码的背景色 */
.transparent-pagination .btn-prev,
.transparent-pagination .btn-next,
.transparent-pagination .el-pager li {
  background: transparent !important;
  border: none !important;
}

/* 移除鼠标悬停时的背景色 */
.transparent-pagination .btn-prev:hover,
.transparent-pagination .btn-next:hover,
.transparent-pagination .el-pager li:hover {
  background: transparent !important;
}

/* 移除当前选中页的背景色，仅保留文字颜色 */
.transparent-pagination .el-pager li.active {
  background: transparent !important;
  color: #409EFF; /* 选中页的文字颜色 */
}

/* 移除整个分页组件的背景 */
.transparent-pagination {
  background: transparent !important;
}
.custom-ellipse-tag {
  border-radius: 15px !important;
  padding: 0 8px !important;
  margin-right: 8px !important;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;
  color: white !important; /* 文字颜色统一为白色 */
  border: none !important;
}
.custom-ellipse-tag1{
   border-radius: 15px !important;
  padding: 8px 8px !important;
  margin-right: 8px !important;
  margin-bottom: 4px;
  height: 24px;
  line-height: 24px;
  display: inline-flex;
  align-items: center;

  border: none !important;
}

/* 根据 type 设置背景色 */
.custom-tag-type-1 {
  background-color: #3B83F6 !important; /* 质检 - 蓝色 */
}
.custom-tag-type-2 {
  background-color: #A856F8 !important; /* 试验 - 紫色 */
}
.custom-tag-type-3 {
  background-color: #6367F1 !important; /* 日志 - 靛蓝 */
}
.custom-tag-type-4 {
  background-color: #E7B214 !important; /* 计量 - 黄色 */
}
.custom-tag-type-5 {
  background-color: #EC489A !important; /* 征拆 - 粉色 */
}
.custom-tag-type-6 {
  background-color: blue !important; /* 征拆 - 粉色 */
}
.custom-tag-type-8 {
  background-color: lightgray !important; /*未关联 - 粉色 */
}
/* 图标样式 */
.custom-ellipse-tag .el-icon-success {
  margin-right: 4px;
  font-size: 12px;
}

/* 图标样式 */
.custom-ellipse-tag .el-icon-success {
  margin-right: 4px;
  font-size: 12px;
}
.project-dialog {
 .el-dialog__body {
   color: black;
   padding: 10px 20px 20px 20px !important;
  }
  .el-dialog__header {
   
    border-bottom: 1px solid #e6e6e6;
  }

}
.custom-header {
  background-color: #F2F3F5 !important;
}
</style>