yudao-admin-yiqun/yudao-ui-admin-vue3/src/views/pressure2/pipeReportRatify/index.vue

<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="taskStatusQueryParams[taskStatus]"
      ref="queryFormRef"
      :inline="true"
      label-width="100px"
    >
      <el-row :gutter="20" class="flex-wrap" style="margin-right: 0">
        <template v-for="(item, index) in formItems" :key="item.prop">
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-collapse-transition>
              <div v-show="isSearchExpanded || index < 4">
                <el-form-item :label="item.label" :prop="item.prop" class="w-full">
                  <template v-if="item.component === 'select-modal'">
                    <el-select
                      v-model="taskStatusQueryParams[taskStatus][item.prop]"
                      readonly
                      clearable
                      placeholder="请选择"
                      multiple
                      popper-class="user-select-popper"
                      @click.stop.prevent="() => handleOpenUserDialog(item.selctOptions, item.prop)"
                      class="w-full"
                    >
                      <el-option
                        v-for="child in item.selctOptions"
                        :key="child && child.id"
                        :label="child.nickName"
                        :value="child.id"
                      />
                    </el-select>
                  </template>
                  <component
                    v-else
                    :is="item.component"
                    v-model="taskStatusQueryParams[taskStatus][item.prop]"
                    v-bind="item.attrs"
                    @keyup.enter="handleQuery"
                    class="w-full min-w-[180px] sm:min-w-[220px] lg:min-w-[240px]"
                  >
                    <!-- select 的 option 渲染 -->
                    <template v-if="item.component === 'el-select'">
                      <el-option
                        v-for="child in item.children"
                        :key="child.value"
                        :label="child.label"
                        :value="child.value"
                      />
                    </template>
                  </component>
                </el-form-item>
              </div>
            </el-collapse-transition>
          </el-col>
        </template>
      </el-row>

      <!-- 按钮区 -->
      <el-row class="flex justify-end mt-2">
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" /> 搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" /> 重置
          </el-button>
<!--          <el-button type="primary" @click="showSettingDialog">-->
<!--            <Icon icon="ep:user" class="mr-5px" /> 审核配置-->
<!--          </el-button>-->
          <el-button link @click="isSearchExpanded = !isSearchExpanded">
            <el-icon>
              <ArrowUp v-if="isSearchExpanded" />
              <ArrowDown v-else />
            </el-icon>
            {{ isSearchExpanded ? '收起' : '展开' }}
          </el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
<!--    <el-radio-group v-model="taskStatus" class="mb-10px" @change="handleQuery">-->
<!--      <el-radio-button label="报告审批" value="reportApprove" />-->
<!--    </el-radio-group>-->
    <el-table
      v-loading="loading"
      :data="list"
      class="cursor-pointer"
      border
      :stripe="true"
      ref="MyTaskTableListRef"
      @row-dblclick="handleRowDblclick"
    >
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column label="任务单号" align="center" prop="orderNo" min-width="150px" />
      <el-table-column label="工程号" align="center" prop="projectNo" min-width="200px">
        <template #default="{ row }">
          <div class="project-info"
               v-for="(item, index) in row.projectNoList"
               :key="item?.id || index">
            <el-tag type="success" class="project-name-tag">{{ item }}</el-tag>
          </div>
        </template>
<!--        <template #default="{ row }">-->
<!--          <div class="project-info">-->
<!--            <div class="project-no">{{ row.projectNo }}</div>-->
<!--            <div v-if="row.projectName" class="project-name-wrapper mt-4px">-->
<!--              <el-tooltip-->
<!--                v-if="row.projectName.length > 15"-->
<!--                :content="row.projectName"-->
<!--                placement="top"-->
<!--              >-->
<!--                <el-tag type="success" class="project-name-tag">-->
<!--                  <span class="project-name-text">{{ row.projectName }}</span>-->
<!--                </el-tag>-->
<!--              </el-tooltip>-->
<!--              <el-tag v-else type="success" class="project-name-tag">-->
<!--                <span class="project-name-text">{{ row.projectName }}</span>-->
<!--              </el-tag>-->
<!--            </div>-->
<!--          </div>-->
<!--        </template>-->
      </el-table-column>
      <!-- <el-table-column label="设备名称" align="center" prop="equipName" min-width="120px" /> -->
      <el-table-column label="使用单位" align="center" prop="unitName" min-width="150px" />
      <el-table-column label="检验性质" align="center" prop="checkType" min-width="120px">
        <template #default="scope">
          {{ PressurePipeCheckTypeMap[scope.row.checkType] }}
        </template>
      </el-table-column>

      <!-- 检验项目 -->
      <el-table-column label="检验项目" prop="reportDOList" min-width="200px">
        <template #default="scope">
          <div v-if="scope.row.reportDOList && scope.row.reportDOList.length > 0">
            <div class="reportDOList-item">
              <!-- 数据大于2条时，使用展开收起功能 -->
              <div v-if="scope.row.reportDOList.length > 2">
                <!-- 始终显示的前2条数据 -->
                <div
                  v-for="(item, index) in scope.row.reportDOList.slice(0, 2)"
                  :key="item?.id || index"
                  class="report-item"
                >
                 <div style="color: #015293">
                    {{ index + 1 }}、{{ item?.reportName }}
                  </div>
                  <div v-if="item?.fee" style="color: #015293">
                    (费用：{{ item?.fee }})
                  </div>
                </div>

                <!-- 可展开的剩余数据 -->
                <div
                  class="expandable-content"
                  :style="{
                    maxHeight: isExpanded(scope.row)
                      ? `${(scope.row.reportDOList.length - 2) * 40}px`
                      : '0px',
                    transition: 'max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
                    overflow: 'hidden'
                  }"
                >
                  <div
                    v-for="(item, index) in scope.row.reportDOList.slice(2)"
                    :key="item?.id || `extra-${index}`"
                    class="report-item-animated"
                    :style="{
                      opacity: isExpanded(scope.row) ? 1 : 0,
                      transform: isExpanded(scope.row) ? 'translateY(0)' : 'translateY(-10px)',
                      transition: `all 0.3s ease ${index * 50}ms`,
                      padding: '2px 0'
                    }"
                  >
                     <div link type="primary" style="color: #015293">
                      {{ index + 3 }}、{{ item?.reportName }}
                    </div>
                    <div v-if="item?.fee" style="color: #015293">
                    (费用：{{ item?.fee }})
                  </div>
                  </div>
                </div>

                <!-- 展开收起按钮 -->
                <div class="expand-control" style="text-align: center; margin-top: 8px">
                  <el-button
                    size="small"
                    link
                    type="primary"
                    @click="toggleExpand(scope.row)"
                    class="expand-button"
                    :style="{
                      transition: 'all 0.2s ease'
                    }"
                  >
                    <span style="margin-right: 4px">
                      {{
                        isExpanded(scope.row)
                          ? '收起'
                          : `查看更多(${scope.row.reportDOList.length - 2}条)`
                      }}
                    </span>
                    <el-icon
                      :style="{
                        width: '12px',
                        height: '12px',
                        display: 'inline-block',
                        transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                        transform: isExpanded(scope.row) ? 'rotate(180deg)' : 'rotate(0deg)'
                      }"
                    >
                      <ArrowDown />
                    </el-icon>
                  </el-button>
                </div>
              </div>

              <!-- 数据小于等于2条时，直接显示所有数据 -->
              <div v-else>
                <div
                  v-for="(item, index) in scope.row.reportDOList"
                  :key="item?.id || index"
                  class="report-item"
                >
                   <div style="color: #015293">
                    {{ index + 1 }}、{{ item?.reportName }}
                  </div>
                  <div v-if="item?.fee" style="color: #015293">
                   (费用：{{ item?.fee }})
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="empty-data">-</div>
        </template>
      </el-table-column>
      <el-table-column label="主报告状态" align="center" prop="taskStatus" min-width="150px">
        <template #default="scope">
          <el-tag :type="getTypeColor(scope.row.taskStatus)">{{
            PressureCheckerMyTaskStatusMap[scope.row.taskStatus]
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="剩余期限 (工作日)"
        align="center"
        prop="remainingDays"
        min-width="140px"
      />
      <el-table-column label="检验时间" align="center" prop="checkDate" min-width="120px">
        <template #default="scope">
          {{ formatArrayDate(scope.row.checkDate) }}
        </template>
      </el-table-column>
      <el-table-column label="项目负责人" align="center" prop="manager" min-width="120px">
        <template #default="scope">
          {{
            scope.row.manager
              ? scope.row.manager.nickname + ' (' + scope.row.manager.employeeNo + ')'
              : '-'
          }}
        </template>
      </el-table-column>
      <!-- 主检人 -->
      <el-table-column label="主检人" align="center" prop="mainInspector" min-width="120px">
        <template #default="scope">
          {{
            scope.row.mainCheckerUser
              ? scope.row.mainCheckerUser.nickname +
                ' (' +
                scope.row.mainCheckerUser.employeeNo +
                ')'
              : '-'
          }}
        </template>
      </el-table-column>
      <el-table-column label="检验员" align="center" prop="checkUsers" min-width="150px">
        <template #default="scope">
          <div v-if="scope.row.checkUsers && scope.row.checkUsers.length > 0">
            <div v-for="user in scope.row.checkUsers" :key="user.id">
              {{ user.nickname }} ({{ user.employeeNo }})
            </div>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="150px" fixed="right">
        <template #default="scope">
          <div class="flex flex-col gap-1">
            <el-button link type="primary" @click="handleEdit(scope.row.id)"> 审批 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="taskStatusQueryParams[taskStatus].pageNo"
      v-model:limit="taskStatusQueryParams[taskStatus].pageSize"
      @pagination="getList"
    />
  </ContentWrap>
  <SettingDialog ref="formRef" />

  <!-- 选择人员公共弹窗 -->
  <CustomDialog
    v-model="customUserDialogVisible"
    :dialogAttrs="{
      zIndex: 10006
    }"
    @confirm="handleUserConfirm"
  >
    <el-input
      v-model="userQueryData.nickName"
      clearable
      placeholder="请输入名称"
      @keyup.enter="handleFetchUserList"
      style="margin-bottom: 14px"
    >
      <template #append>
        <el-button @click="handleFetchUserList">
          <Icon icon="ep:search" />
        </el-button>
      </template>
    </el-input>

    <SmartTable
      ref="userTableRef"
      v-model:pageNo="userQueryData.pageNo"
      v-model:pagesize="userQueryData.pageSize"
      :total="userQueryData.total"
      v-model:columns="userColumns"
      :data="userTableList"
      :buttons="[]"
      :showSettingTools="false"
      :showSearch="false"
      :showRefresh="false"
      @on-page-size-change="onPageSizeChange"
      @on-page-no-change="onPageNoChange"
    />
  </CustomDialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { formatArrayDate } from '@/utils/formatTime'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { PipeTaskOrderApi, PipeTaskOrderOrderItemVO } from '@/api/pressure2/pipetaskorder'
import {
  PressurePipeCheckTypeMap,
  PressureCheckerMyTaskStatusMap,
  PressureCheckerMyTaskStatus,
  PressureTaskOrderTaskStatus
} from '@/utils/constants'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import SettingDialog from '@/views/pressure/checker/components/SettingDialog.vue'
const router = useRouter()
import SmartTable from '@/components/SmartTable/SmartTable'
import { getUserList } from '@/api/common/user'
import { useUserStore } from '@/store/modules/user'
import { cloneDeep } from 'lodash-es'
import { useEmitt } from '@/hooks/web/useEmitt'
const userStore = useUserStore()
const userInfo = computed(() => userStore.user)
const route = useRoute()

const getTypeColor = (status: string | number) => {
  const statusMap = {
    [PressureTaskOrderTaskStatus.WAIT_CONFIRM]: 'primary',
    [PressureTaskOrderTaskStatus.CANCELLED]: 'info',
    [PressureTaskOrderTaskStatus.AUDITING_EDIT]: 'warning',
    [PressureTaskOrderTaskStatus.AUDITING_CANCEL]: 'warning',
    [PressureTaskOrderTaskStatus.AUDITING_TIME]: 'warning',
    [PressureTaskOrderTaskStatus.CONFIRMED]: 'success',
    [PressureTaskOrderTaskStatus.RECORD_INPUT]: 'warning',
    [PressureTaskOrderTaskStatus.RECORD_CHECK]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_INPUT]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_AUDIT]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_APPROVE]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_CONFIRMATION]: 'warning',
    [PressureTaskOrderTaskStatus.REPORT_END]: 'success'
  }
  return statusMap[status] || 'info'
}
/** 报告编制 列表 */
defineOptions({ name: 'ReportRatifyBoiler' })
const isSearchExpanded = ref<boolean>(false)
const loading = ref(true)
const list = ref<PipeTaskOrderOrderItemVO[]>([])
const total = ref(0)
const queryParams = reactive<Recordable>({
  pageNo: 1,
  pageSize: 10,
  orderNo: undefined,
  unitName: undefined,
  checkType: undefined,
  projectNo: undefined,
  productNo: undefined,
  checkDate: [],
  // checkUserStrIds: [userInfo.value.id],
  // managerStrIds: [userInfo.value.id],
  checkUserStrIds: [],
  managerStrIds: [],
  // taskStatusList: ['520'],
  remainingDays: undefined,
  mainCheckerStrIds: [userInfo.value.id]
})


const defaultFormValue = {
  pageNo: 1,
  pageSize: 10,
  orderNo: undefined,
  unitName: undefined,
  checkType: undefined,
  projectNo: undefined,
  productNo: undefined,
  checkDate: [],
  // checkUserStrIds: [userInfo.value.id],
  // managerStrIds: [userInfo.value.id],
  checkUserStrIds: [],
  managerStrIds: [],
  // taskStatusList: ['520'],
  remainingDays: undefined,
  mainCheckerStrIds: [userInfo.value.id]
}
const taskStatus = ref('reportApprove')
const taskStatusQueryParams =reactive({
  reportApprove: {...defaultFormValue, taskStatus: 700},
})


const ReportPreparationStatusOpts = {
  [PressureCheckerMyTaskStatus.REPORT_APPROVE]: '报告审批'
}
const formItems = [
  {
    label: '工程号',
    prop: 'projectNo',
    component: 'el-input',
    attrs: {
      placeholder: '请输入工程号',
      clearable: true
    }
  },
  // {
  //   label: '任务状态',
  //   prop: 'taskStatusList',
  //   component: 'el-select',
  //   attrs: {
  //     placeholder: '请选择任务状态',
  //     clearable: true,
  //     multiple: true
  //   },
  //   children: [
  //     // { label: '全部', value: 'all' },
  //     ...Object.entries(ReportPreparationStatusOpts).map(([key, label]) => ({
  //       label,
  //       value: key
  //     }))
  //   ]
  // },
  {
    label: '任务单号',
    prop: 'orderNo',
    component: 'el-input',
    attrs: {
      placeholder: '请输入任务单号',
      clearable: true
    }
  },
  {
    label: '使用单位',
    prop: 'unitName',
    component: 'el-input',
    attrs: {
      placeholder: '请输入使用单位',
      clearable: true
    }
  },
  {
    label: '检验性质',
    prop: 'checkType',
    component: 'el-select',
    attrs: {
      placeholder: '请选择检验性质',
      clearable: true
    },
    children: Object.entries(PressurePipeCheckTypeMap).map(([key, label]) => ({
      label,
      value: key
    }))
  },
  {
    label: '检验时间',
    prop: 'checkDate',
    component: 'el-date-picker',
    attrs: {
      type: 'daterange',
      placeholder: '请选择时间',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')],
      class: '!w-240px'
    }
  },
  {
    label: '主检人',
    prop: 'mainCheckerStrIds',
    component: 'select-modal',
    selctOptions: [{ id: userInfo.value.id, nickName: userInfo.value?.nickname }],
    attrs: {
      placeholder: '请输入主检人名称',
      clearable: true
    }
  },
  {
    label: '检验员',
    prop: 'checkUserStrIds',
    component: 'select-modal',
    selctOptions: [{ id: userInfo.value.id, nickName: userInfo.value?.nickname }],
    attrs: {
      placeholder: '请输入检验员名称',
      clearable: true
    }
  },
  {
    label: '项目负责人',
    prop: 'managerStrIds',
    component: 'select-modal',
    selctOptions: [{ id: userInfo.value.id, nickName: userInfo.value?.nickname }],
    attrs: {
      placeholder: '请输入项目负责人',
      clearable: true
    }
  },
  // {
  //   label: '剩余期限',
  //   prop: 'remainingDays',
  //   component: 'el-input',
  //   attrs: {
  //     placeholder: '请输入剩余期限',
  //     clearable: true
  //   }
  // },
  // {
  //   label: '出厂编号',
  //   prop: 'productNo',
  //   component: 'el-input',
  //   attrs: {
  //     placeholder: '请输入出厂编号',
  //     clearable: true
  //   }
  // }
]
const queryFormRef = ref()
const formRef = ref()

const showSettingDialog = () => {
  formRef.value.open()
}
// 存储展开状态的响应式数据
const expandedRows = ref(new Set())

// 判断行是否展开
const isExpanded = (row) => {
  return expandedRows.value.has(row.id || JSON.stringify(row))
}

// 切换展开状态
const toggleExpand = (row) => {
  const rowKey = row.id || JSON.stringify(row)
  if (expandedRows.value.has(rowKey)) {
    expandedRows.value.delete(rowKey)
  } else {
    expandedRows.value.add(rowKey)
  }
}
const formattingFn = (reportDOList: Record<string, any>[]) => {
  return `<ol style="padding: 10px">${reportDOList
    .map((item) => `<li>${item.reportName}</li>`)
    .join('')}</ol>`
}
const MyTaskTableListRef = ref() // table的实例

// 出具报告对话框状态
const generateReportDialogVisible = ref(false)
const currentReportItem = ref<any>(null)

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const params: any = cloneDeep(taskStatusQueryParams[unref(taskStatus)])
    if (params.taskStatus === 'all') {
      params.taskStatus = undefined
    }
    params.checkUserStrIds = params.checkUserStrIds.join(',')
    params.managerStrIds = params.managerStrIds.join(',')
    params.mainCheckerStrIds = params.mainCheckerStrIds.join(',')
    // params.taskStatusList = params.taskStatusList.join(',')
    if(!params.checkUserStrIds) delete params.checkUserStrIds
    if(!params.managerStrIds) delete params.managerStrIds
    if(!params.mainCheckerStrIds) delete params.mainCheckerStrIds
    if(!params.taskStatusList) delete params.taskStatusList
    const data = await PipeTaskOrderApi.prepareReportPage(params)
    list.value = data.list
    total.value = data.total
  } catch (error) {
    console.error('获取我的任务列表失败:', error)
    ElMessage.error('获取报告编制列表失败')
    list.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  taskStatusQueryParams[unref(taskStatus)].pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  // queryParams.taskStatusList = ['520']
  handleQuery()
}

// 修改后的编辑/查看详情操作
const handleEdit = (id: string) => {
  router.push({ name: 'PipeCheckerTaskDetail', query: { id, type: 'reportRatify' } })
}
const handleRowDblclick = (row: Record<string, any>) => {
  if (row.isClaim === false) {
    return
  }
  router.push({ name: 'PipeCheckerTaskDetail', query: { id: row.id, type: 'reportRatify' } })
}

//------------人员选择弹窗------------------------

const checkFormOptions = ref<any[]>([])
const fieldKey = ref('')

const userTableRef = ref()
const customUserDialogVisible = ref(false)
interface UserListQuery {
  nickName: string
  pageNo: number
  pageSize: number
  total?: number
}

const userQueryData = reactive<UserListQuery>({
  nickName: '',
  pageNo: 1,
  pageSize: 10,
  total: 0
})

const userTableList = ref<any[]>([])
const userColumns = ref<any[]>([
  {
    type: 'selection',
    width: '50px'
  },
  {
    label: '工号',
    prop: 'employeeNo'
  },
  {
    label: '姓名',
    prop: 'nickname'
  },
  {
    label: '部门',
    prop: 'deptName'
  }
])
// 打开用户选择框
const handleOpenUserDialog = (options: any, key: string) => {
  checkFormOptions.value = options
  fieldKey.value = key
  userQueryData.nickName = ''
  userQueryData.pageNo = 1
  userQueryData.pageSize = 10
  handleFetchUserList()
}

// 获取用户信息
const handleFetchUserList = async () => {
  const queryParams: UserListQuery = {
    ...userQueryData
  }
  delete queryParams.total
  const result = await getUserList(queryParams)
  userTableList.value = result.list
  userQueryData.total = result.total
  customUserDialogVisible.value = true
}

const onPageSizeChange = (val) => {
  userQueryData.pageSize = val
  handleFetchUserList()
}
const onPageNoChange = (val) => {
  userQueryData.pageNo = val
  handleFetchUserList()
}
const handleUserConfirm = () => {
  console.log('getTableRef', userTableRef.value.getTableRef())
  const selectRows = userTableRef.value.getTableRef().getSelectionRows()
  console.log('selectRows', selectRows)
  // 过滤组合合成options
  const currOptions = checkFormOptions.value.map((item) => item.id) || []
  selectRows
    .filter((item) => !currOptions.includes(item.id))
    .forEach((item) => {
      checkFormOptions.value.push({
        id: item.id,
        nickName: item.nickname,
        employeeNo: item.employeeNo
      })
    })
  taskStatusQueryParams[unref(taskStatus)][unref(fieldKey)] = [
    ...new Set([...taskStatusQueryParams[unref(taskStatus)][unref(fieldKey)], ...selectRows.map((row) => row.id)])
  ]
    
  // queryParams[fieldKey.value] = [
  //   ...new Set([...queryParams[fieldKey.value], ...selectRows.map((row) => row.id)])
  // ]
  customUserDialogVisible.value = false
}
//------------------------------------
const { emitter } = useEmitt()
const { bpmUserId } = route.query as Recordable
if (bpmUserId) {
  taskStatus.value = 'reportInput'
  taskStatusQueryParams[unref(taskStatus)].mainCheckerStrIds = [bpmUserId]
  taskStatusQueryParams[unref(taskStatus)].taskStatus = '520'
}
/** 初始化 **/
onMounted(() => {
  getList()
  emitter.on('refresh-report-reportRatify-pipe', ()=> {
    getList();
  })
})
onUnmounted(() => {
  emitter.off('refresh-report-reportRatify-pipe')
})

</script>

<style lang="scss" scoped>
.cursor-pointer .el-table__row {
  cursor: pointer;
}
.report-item {
  display: flex;
  flex-direction: column;
}
.report-item-animated {
  line-height: 1.5;
}

.report-name-list {
  position: relative;
  .collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15px;
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
    pointer-events: none;
  }
}
.project-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-no {
  width: 100%;
  text-align: center;
  margin-bottom: 2px;
}

.project-name-tag {
  max-width: 100%;
  display: inline-flex;

  .project-name-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
  }
}

</style>
<style>
.user-select-popper {
  display: none !important;
}
</style>