style(工作台): 修复工作台卡片取消切换模式改为宽度自适应
This commit is contained in:
parent
75b73c6152
commit
0a037a2f3b
|
@ -22,8 +22,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="my-[16px]">
|
||||
<TabCard :content-tab-list="apiCountTabList" not-has-padding hidden-border min-width="296px">
|
||||
<template #item="{ item: tabItem }">
|
||||
<div class="flex gap-[16px]">
|
||||
<div
|
||||
v-for="tabItem of apiCountTabList"
|
||||
:key="tabItem.label"
|
||||
:class="`flex-1 ${tabItem.value === 'complete' ? 'min-w-[300px]' : 'min-w-[197px]'}`"
|
||||
>
|
||||
<PassRatePie
|
||||
:tooltip-text="tabItem.tooltip"
|
||||
:options="tabItem.options"
|
||||
|
@ -32,8 +36,8 @@
|
|||
:has-permission="hasPermission"
|
||||
:value-list="tabItem.valueList"
|
||||
/>
|
||||
</template>
|
||||
</TabCard>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[148px]">
|
||||
<MsChart :options="apiCountOptions" />
|
||||
</div>
|
||||
|
@ -52,7 +56,6 @@
|
|||
import MsSelect from '@/components/business/ms-select';
|
||||
import CardSkeleton from './cardSkeleton.vue';
|
||||
import PassRatePie from './passRatePie.vue';
|
||||
import TabCard from './tabCard.vue';
|
||||
|
||||
import { workApiCountCoverRage, workApiCountDetail } from '@/api/modules/workbench';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
|
|
@ -22,19 +22,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-[16px]">
|
||||
<TabCard :content-tab-list="caseCountTabList" not-has-padding hidden-border min-width="270px">
|
||||
<template #item="{ item: tabItem }">
|
||||
<div class="w-full">
|
||||
<PassRatePie
|
||||
:options="tabItem.options"
|
||||
:tooltip-text="tabItem.tooltip"
|
||||
:size="60"
|
||||
:value-list="tabItem.valueList"
|
||||
:has-permission="hasPermission"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</TabCard>
|
||||
<div class="flex gap-[16px]">
|
||||
<div v-for="tabItem of caseCountTabList" :key="tabItem.label" class="flex-1">
|
||||
<PassRatePie
|
||||
:options="tabItem.options"
|
||||
:tooltip-text="tabItem.tooltip"
|
||||
:size="60"
|
||||
:value-list="tabItem.valueList"
|
||||
:has-permission="hasPermission"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-[148px]">
|
||||
<MsChart :options="caseCountOptions" />
|
||||
</div>
|
||||
|
@ -53,7 +52,6 @@
|
|||
import MsSelect from '@/components/business/ms-select';
|
||||
import CardSkeleton from './cardSkeleton.vue';
|
||||
import PassRatePie from './passRatePie.vue';
|
||||
import TabCard from './tabCard.vue';
|
||||
|
||||
import { workCaseCountDetail } from '@/api/modules/workbench';
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
allow-clear
|
||||
allow-search
|
||||
:search-keys="['label']"
|
||||
class="!w-[200px]"
|
||||
class="!w-[220px]"
|
||||
:prefix="t('workbench.homePage.staff')"
|
||||
:multiple="true"
|
||||
:has-all-select="true"
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
value-key="id"
|
||||
label-key="name"
|
||||
:search-keys="['name']"
|
||||
class="!w-[200px]"
|
||||
class="!w-[230px]"
|
||||
:prefix="t('workbench.homePage.project')"
|
||||
:multiple="true"
|
||||
:has-all-select="true"
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
value-key="value"
|
||||
label-key="label"
|
||||
:search-keys="['label']"
|
||||
class="!w-[200px]"
|
||||
class="!w-[220px]"
|
||||
:prefix="t('workbench.homePage.staff')"
|
||||
:multiple="true"
|
||||
:has-all-select="true"
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
</div>
|
||||
<div class="pass-rate-title flex-1">
|
||||
<div v-for="item of props.valueList" :key="item.label" class="flex-1">
|
||||
<div class="mb-[8px] text-[var(--color-text-4)]">{{ item.label }}</div>
|
||||
<div class="one-line-text mb-[8px] text-[var(--color-text-4)]">{{ item.label }}</div>
|
||||
<div class="pass-rate-count">{{ hasPermission ? addCommasToNumber(item.value as number) : '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -21,8 +21,6 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
import MsChart from '@/components/pure/chart/index.vue';
|
||||
|
||||
import { useI18n } from '@/hooks/useI18n';
|
||||
|
|
|
@ -22,18 +22,16 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-[16px]">
|
||||
<TabCard :content-tab-list="testPlanTabList" not-has-padding hidden-border min-width="290px">
|
||||
<template #item="{ item: tabItem }">
|
||||
<div class="w-full">
|
||||
<PassRatePie
|
||||
:has-permission="hasPermission"
|
||||
:options="tabItem.options"
|
||||
:size="60"
|
||||
:value-list="tabItem.valueList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</TabCard>
|
||||
<div class="flex gap-[16px]">
|
||||
<div v-for="tabItem of testPlanTabList" :key="tabItem.label" class="flex-1">
|
||||
<PassRatePie
|
||||
:has-permission="hasPermission"
|
||||
:options="tabItem.options"
|
||||
:size="60"
|
||||
:value-list="tabItem.valueList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-[148px]">
|
||||
<MsChart :options="testPlanCountOptions" />
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div :class="`work-bench-content ${defaultWorkList.length ? 'min-w-[1000px]' : ''}`">
|
||||
<div :class="`work-bench-content ${defaultWorkList.length ? 'min-w-[1200px]' : ''}`">
|
||||
<div class="header-setting pb-[4px]">
|
||||
<div
|
||||
class="setting sticky top-0 z-[999] mb-[-16px] flex items-center justify-between bg-[var(--color-bg-3)] pb-[16px]"
|
||||
|
|
Loading…
Reference in New Issue