Skip to content

B
bkunyun
Commit 31c4e0d2 authored by wuyongsheng's avatar wuyongsheng
Browse files
Options

Merge branch 'feat-20220920-taskDetails' into 'master' 

Feat 20220920 task details

See merge request !120
parents 95d8fd24 4c0b9d40
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1819 additions and 587 deletions
src/api/fileserver/CloudEController.ts
View file @ 31c4e0d2
......@@ -30,6 +30,27 @@ type IGetDatasetItemsListParams = {
sort?: string; // 排序
}
export type IQuery = {
index: string;
compare: ">" | "<" | ">=" | "<=" | "=" | "≈";
query: string;
};
type IQuerylist = Array<IQuery>
type IGetDatasetItemsListNewParamstype = {
type?: string;
projectId: string;
token: string;
filetoken: string;
path: string; // 数据集路径
name: string; // 数据集名称
page: number; //
size: number; //
index?: string; // 选择的属性
sort?: string; // 排序
}
type IGetDatasetSizeParams = {
type?: string; // 产品id
projectId: string;
......@@ -281,6 +302,22 @@ class CloudEController {
}
}
// 获取数据集里的数据列表（新 可支持高级搜索）
static GetDatasetItemsListNew(params: IGetDatasetItemsListNewParamstype, querylist: IQuerylist) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
headers["Cache-Control"] = "no-cache";
let url = getUrlThroughParams(params, ['filetoken','path','token'], '?')
return axios.post(
`${APIOPTION()}:5003/find/dataset/new${url}`,{
querylist
},
{
headers: headers,
}
);
}
}
// 分子另存为
static SaveDataset(params: ISaveDatasetParams) {
if (ApiUtils.getAuthorizationHeaders(headers)) {
......
src/assets/project/ascIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 64</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-64">
<rect id="底框备份" x="0" y="0" width="16" height="16"></rect>
<polygon id="路径-15备份-5" fill="#8A9099" fill-rule="nonzero" points="7 3 7 13 3 13 3 11.2857143 5.39968807 11.2855021 5.4 3"></polygon>
<polygon id="路径-15备份-6" fill="#1370FF" fill-rule="nonzero" transform="translate(11.000000, 8.000000) scale(-1, -1) translate(-11.000000, -8.000000) " points="13 3 13 13 9 13 9 11.2857143 11.3996881 11.2855021 11.4 3"></polygon>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/blackCheckBox.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 7</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="矩形备份-7" stroke="#565C66" fill="#1E2633" x="0.5" y="0.5" width="14" height="14" rx="2"></rect>
</g>
</svg>
\ No newline at end of file
src/assets/project/blackCheckBoxActive.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 64</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-64">
<rect id="矩形备份-28" fill="#1370FF" x="0" y="0" width="15" height="15" rx="2"></rect>
<polyline id="路径-26" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="3.5 7.83740166 6.77434245 10.5 11.5 4.5"></polyline>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/blackCheckBoxHover.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 22</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="矩形备份-22" stroke="#565C66" fill="#000000" x="0.5" y="0.5" width="14" height="14" rx="2"></rect>
</g>
</svg>
\ No newline at end of file
src/assets/project/card.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 8备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#8A9099" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#8A9099" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#8A9099" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#8A9099" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/cardActive.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/图表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/图表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形备份-3" fill="#1370FF" x="3" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-7" fill="#1370FF" x="3" y="7.75" width="3.25" height="3.25"></rect>
<rect id="矩形备份-4" fill="#1370FF" x="7.75" y="3" width="3.25" height="3.25"></rect>
<rect id="矩形备份-9" fill="#1370FF" x="7.75" y="7.75" width="3.25" height="3.25"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/delete.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 58备份 7</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-58备份-7">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-50" transform="translate(1.000000, 1.605109)" stroke="#C2C6CC" stroke-width="1.5">
<line x1="0" y1="2.39431484" x2="14" y2="2.39431484" id="路径-16"></line>
<path d="M3.37934347,2.39431484 L3.37934347,1 C3.37934347,0.44771525 3.82705872,1.01453063e-16 4.37934347,0 L9.63329305,0 C10.1855778,-1.01453063e-16 10.6332931,0.44771525 10.6332931,1 L10.6332931,2.39431484 L10.6332931,2.39431484" id="路径-17"></path>
<path d="M2.45321216,3.89402686 L2.45321216,11.9292428 C2.45321216,12.4815275 2.90092741,12.9292428 3.45321216,12.9292428 L10.4872657,12.9292428 C11.0395505,12.9292428 11.4872657,12.4815275 11.4872657,11.9292428 L11.4872657,3.89402686 L11.4872657,3.89402686" id="路径-20"></path>
<line x1="5.49894415" y1="3.89402686" x2="5.49894415" y2="10.3954667" id="路径-21"></line>
<line x1="8.49836822" y1="3.89402686" x2="8.49836822" y2="10.3954667" id="路径-22"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/deleteDisable.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 58备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-58备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-50" transform="translate(1.000000, 1.605109)" stroke="#DDE1E6" stroke-width="1.5">
<line x1="0" y1="2.39431484" x2="14" y2="2.39431484" id="路径-16"></line>
<path d="M3.37934347,2.39431484 L3.37934347,1 C3.37934347,0.44771525 3.82705872,1.01453063e-16 4.37934347,0 L9.63329305,0 C10.1855778,-1.01453063e-16 10.6332931,0.44771525 10.6332931,1 L10.6332931,2.39431484 L10.6332931,2.39431484" id="路径-17"></path>
<path d="M2.45321216,3.89402686 L2.45321216,11.9292428 C2.45321216,12.4815275 2.90092741,12.9292428 3.45321216,12.9292428 L10.4872657,12.9292428 C11.0395505,12.9292428 11.4872657,12.4815275 11.4872657,11.9292428 L11.4872657,3.89402686 L11.4872657,3.89402686" id="路径-20"></path>
<line x1="5.49894415" y1="3.89402686" x2="5.49894415" y2="10.3954667" id="路径-21"></line>
<line x1="8.49836822" y1="3.89402686" x2="8.49836822" y2="10.3954667" id="路径-22"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/deleteHover.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 58备份 7</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-58备份-7">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-50" transform="translate(1.000000, 1.605109)" stroke="#565C66" stroke-width="1.5">
<line x1="0" y1="2.39431484" x2="14" y2="2.39431484" id="路径-16"></line>
<path d="M3.37934347,2.39431484 L3.37934347,1 C3.37934347,0.44771525 3.82705872,1.01453063e-16 4.37934347,0 L9.63329305,0 C10.1855778,-1.01453063e-16 10.6332931,0.44771525 10.6332931,1 L10.6332931,2.39431484 L10.6332931,2.39431484" id="路径-17"></path>
<path d="M2.45321216,3.89402686 L2.45321216,11.9292428 C2.45321216,12.4815275 2.90092741,12.9292428 3.45321216,12.9292428 L10.4872657,12.9292428 C11.0395505,12.9292428 11.4872657,12.4815275 11.4872657,11.9292428 L11.4872657,3.89402686 L11.4872657,3.89402686" id="路径-20"></path>
<line x1="5.49894415" y1="3.89402686" x2="5.49894415" y2="10.3954667" id="路径-21"></line>
<line x1="8.49836822" y1="3.89402686" x2="8.49836822" y2="10.3954667" id="路径-22"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/descIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 65</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-65">
<rect id="底框" x="0" y="0" width="16" height="16"></rect>
<polygon id="路径-15" fill="#1370FF" fill-rule="nonzero" points="7 3 7 13 3 13 3 11.2857143 5.39968807 11.2855021 5.4 3"></polygon>
<polygon id="路径-15备份" fill="#8A9099" fill-rule="nonzero" transform="translate(11.000000, 8.000000) scale(-1, -1) translate(-11.000000, -8.000000) " points="13 3 13 13 9 13 9 11.2857143 11.3996881 11.2855021 11.4 3"></polygon>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/filter.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/筛选备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/筛选备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组" transform="translate(1.780000, 2.250000)" stroke="#565C66" stroke-linejoin="round" stroke-width="1.5">
<polygon id="路径-37" points="0 0 12.4359884 0 7.73913801 5.73968697 7.73913801 12 4.97439538 10.7631496 4.97439538 5.85023682"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/sort.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/排序备份 5</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/排序备份-5">
<rect id="底框" x="0" y="0" width="16" height="16"></rect>
<g id="排序" transform="translate(3.000000, 3.000000)" fill="#8A9099" fill-rule="nonzero">
<polygon id="路径-15" points="4 0 4 10 0 10 0 8.28571429 2.39968807 8.28550207 2.4 0"></polygon>
<polygon id="路径-15备份" transform="translate(8.000000, 5.000000) scale(-1, -1) translate(-8.000000, -5.000000) " points="10 0 10 10 6 10 6 8.28571429 8.39968807 8.28550207 8.4 0"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/table.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#8A9099" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#8A9099" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#8A9099" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#8A9099" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/tableActive.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>1.Base基础/Icon图标/列表排序备份 2</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1.Base基础/Icon图标/列表排序备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-4" transform="translate(1.000000, 1.000000)">
<rect id="矩形" stroke="#1370FF" stroke-width="1.5" x="0.75" y="0.75" width="12.5" height="12.5" rx="1"></rect>
<rect id="矩形" fill="#1370FF" x="3" y="3" width="8" height="1.5"></rect>
<rect id="矩形备份-10" fill="#1370FF" x="3" y="6.25" width="8" height="1.5"></rect>
<rect id="矩形备份-11" fill="#1370FF" x="3" y="9.5" width="8" height="1.5"></rect>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/taskResultsDatasetIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 13备份</title>
<defs>
<linearGradient x1="50%" y1="-4.26048086e-13%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#26AAF9" offset="0%"></stop>
<stop stop-color="#1370FF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-13备份">
<rect id="矩形" fill="url(#linearGradient-1)" x="0" y="0" width="40" height="40" rx="4"></rect>
<g id="编组-4备份-4" transform="translate(9.000000, 9.000000)">
<g id="矩形-2">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
</g>
<path d="M18.14,3 L3.86,3 C3.385,3 3,3.3852 3,3.86 L3,6.54 C3,7.015 3.385,7.4 3.86,7.4 L18.14,7.4 C18.615,7.4 19,7.015 19,6.54 L19,3.86 C19,3.3852 18.615,3 18.14,3 Z M17.28,5.68 L9.28,5.68 C9.298916,5.6446 9.30956773,5.6036 9.30956773,5.56 L9.30956773,4.84 C9.30956773,4.7964 9.298916,4.7554 9.28,4.72 L17.28,4.72 L17.28,5.68 Z M18.14,8.8 L3.86,8.8 C3.385,8.8 3,9.1852 3,9.66 L3,12.34 C3,12.815 3.385,13.2 3.86,13.2 L18.14,13.2 C18.615,13.2 19,12.815 19,12.34 L19,9.66 C19,9.1852 18.615,8.8 18.14,8.8 Z M17.28,11.48 L9.28,11.48 C9.298916,11.4446 9.30956773,11.4036 9.30956773,11.36 L9.30956773,10.64 C9.30956773,10.5964 9.298916,10.5554 9.28,10.52 L17.28,10.52 L17.28,11.48 Z M18.14,14.6 L3.86,14.6 C3.385,14.6 3,14.9852 3,15.46 L3,18.14 C3,18.615 3.385,19 3.86,19 L18.14,19 C18.615,19 19,18.615 19,18.14 L19,15.46 C19,14.9852 18.615,14.6 18.14,14.6 Z M17.28,17.28 L9.28,17.28 C9.298916,17.2446 9.30956773,17.2036 9.30956773,17.16 L9.30956773,16.44 C9.30956773,16.3964 9.298916,16.3554 9.28,16.32 L17.28,16.32 L17.28,17.28 Z" id="形状" fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/taskResultsDownloadHoverIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 22备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-22备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-57" transform="translate(1.500000, 0.500000)" stroke="#565C66" stroke-linejoin="round" stroke-width="1.5">
<polyline id="路径" points="2.61444632e-13 10.5038375 0 14 13 14 13 10.5"></polyline>
<polyline id="路径" points="11 6 6.5 10.5 2 6"></polyline>
<line x1="6.49585" y1="0" x2="6.5" y2="10" id="路径"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/taskResultsDownloadIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 22备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-22备份">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-57" transform="translate(1.500000, 0.500000)" stroke="#8A9099" stroke-linejoin="round" stroke-width="1.5">
<polyline id="路径" points="2.61444632e-13 10.5038375 0 14 13 14 13 10.5"></polyline>
<polyline id="路径" points="11 6 6.5 10.5 2 6"></polyline>
<line x1="6.49585" y1="0" x2="6.5" y2="10" id="路径"></line>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/taskResultsFileIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 7备份 3</title>
<defs>
<linearGradient x1="50%" y1="-4.26048086e-13%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#75EBCB" offset="0%"></stop>
<stop stop-color="#0DD09B" offset="100%"></stop>
</linearGradient>
</defs>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-7备份-3">
<rect id="矩形备份" fill="url(#linearGradient-1)" x="0" y="0" width="40" height="40" rx="4"></rect>
<g id="编组-7备份-14" transform="translate(9.000000, 9.000000)">
<rect id="矩形" x="0" y="0" width="22" height="22"></rect>
<g id="编组-6" transform="translate(3.928571, 2.357143)">
<path d="M1.2,0 L9.49020093,0 L9.49020093,0 L14.1428571,4.65265622 L14.1428571,16.0857143 C14.1428571,16.748456 13.6055988,17.2857143 12.9428571,17.2857143 L1.2,17.2857143 C0.5372583,17.2857143 -3.6292676e-16,16.748456 0,16.0857143 L0,1.2 C-8.11624501e-17,0.5372583 0.5372583,-3.22345535e-16 1.2,0 Z" id="矩形" fill="#FFFFFF"></path>
<g id="编组-4" transform="translate(3.535714, 7.142857)" stroke="#0DD09B" stroke-width="1.2">
<line x1="7.85086282e-15" y1="6.39285714" x2="7.07142857" y2="6.39285714" id="路径-15备份-2"></line>
<line x1="7.85086282e-15" y1="3.39285714" x2="7.07142857" y2="3.39285714" id="路径-15备份-3"></line>
<line x1="7.85086282e-15" y1="0.392857143" x2="7.07142857" y2="0.392857143" id="路径-15备份-4"></line>
</g>
<path d="M9.49020093,0 L14.1428571,4.65265622 L10.6902009,4.65265622 C10.0274592,4.65265622 9.49020093,4.11539792 9.49020093,3.45265622 L9.49020093,0 L9.49020093,0 Z" id="路径-9" fill="#9AF8E5"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/taskResultsSeeHoverIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 65备份</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-65备份">
<rect id="矩形" x="0" y="0" width="18" height="18"></rect>
<g id="1.Base基础/Icon图标/查看备份" transform="translate(1.000000, 1.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-58" transform="translate(0.500000, 1.488632)" stroke="#565C66" stroke-width="1.62830815">
<g id="编组">
<line x1="0" y1="0.5" x2="12.4755135" y2="0.5" id="路径"></line>
<line x1="0" y1="6.18590274" x2="4.99389897" y2="6.18590274" id="路径"></line>
<line x1="0" y1="11.8718055" x2="5.66782353" y2="11.8718055" id="路径"></line>
<line x1="13.0860211" y1="10.7189929" x2="15.2967853" y2="13.4172047" id="路径"></line>
<path d="M10.6064141,3.72994425 C11.6910045,3.72994425 12.6717682,4.15682942 13.3821406,4.84341174 C14.1027218,5.53986092 14.5458693,6.50270675 14.5458693,7.56473415 C14.5458693,8.62676155 14.1027218,9.58960738 13.3821406,10.2860566 C12.6717682,10.9726389 11.6910045,11.3995241 10.6064141,11.3995241 C9.52182361,11.3995241 8.54105997,10.9726389 7.83068751,10.2860566 C7.11010631,9.58960738 6.66695888,8.62676155 6.66695888,7.56473415 C6.66695888,6.50270675 7.11010631,5.53986092 7.83068751,4.84341174 C8.54105997,4.15682942 9.52182361,3.72994425 10.6064141,3.72994425 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/project/taskResultsSeeIcon.svg 0 → 100644
View file @ 31c4e0d2
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>编组 65</title>
<g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="编组-65">
<rect id="矩形" x="0" y="0" width="18" height="18"></rect>
<g id="1.Base基础/Icon图标/查看备份" transform="translate(1.000000, 1.000000)">
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
<g id="编组-58" transform="translate(0.500000, 1.488632)" stroke="#8A9099" stroke-width="1.62830815">
<g id="编组">
<line x1="0" y1="0.5" x2="12.4755135" y2="0.5" id="路径"></line>
<line x1="0" y1="6.18590274" x2="4.99389897" y2="6.18590274" id="路径"></line>
<line x1="0" y1="11.8718055" x2="5.66782353" y2="11.8718055" id="路径"></line>
<line x1="13.0860211" y1="10.7189929" x2="15.2967853" y2="13.4172047" id="路径"></line>
<path d="M10.6064141,3.72994425 C11.6910045,3.72994425 12.6717682,4.15682942 13.3821406,4.84341174 C14.1027218,5.53986092 14.5458693,6.50270675 14.5458693,7.56473415 C14.5458693,8.62676155 14.1027218,9.58960738 13.3821406,10.2860566 C12.6717682,10.9726389 11.6910045,11.3995241 10.6064141,11.3995241 C9.52182361,11.3995241 8.54105997,10.9726389 7.83068751,10.2860566 C7.11010631,9.58960738 6.66695888,8.62676155 6.66695888,7.56473415 C6.66695888,6.50270675 7.11010631,5.53986092 7.83068751,4.84341174 C8.54105997,4.15682942 9.52182361,3.72994425 10.6064141,3.72994425 Z" id="路径"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css
View file @ 31c4e0d2
......@@ -3,7 +3,7 @@
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #e6e8eb;
/* border: 1px solid #e6e8eb; */
border-radius: 4px;
background-color: #f0f2f5;
cursor: pointer;
......@@ -11,21 +11,28 @@
box-sizing: border-box;
padding: 2px;
}
.radio {
.radioBox {
position: relative;
min-width: 63px;
height: 28px;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
border-radius: 2px;
line-height: 20px;
padding: 6px 16px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.radio {
position: relative;
box-sizing: border-box;
font-size: 14px;
color: #565c66;
padding: 6px 16px;
white-space: nowrap;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.radioActive {
......@@ -33,6 +40,8 @@
position: relative;
}
.border {
position: absolute;
right: 0px;
width: 1px;
height: 16px;
background-color: rgba(209, 214, 222, 1);
......@@ -41,10 +50,10 @@
visibility: hidden;
}
.radioActiveBgBox {
width: calc(100% - 2px);
width: calc(100% - 4px);
position: absolute;
left: 1px;
top: 1px;
left: 2px;
top: 2px;
height: 28px;
}
.radioActiveBg {
......
src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
View file @ 31c4e0d2
......@@ -8,12 +8,12 @@
*/
// 按钮样式的单选组
import classnames from "classnames";
import { useMemo } from "react";
import { ReactElement, useMemo } from "react";
import style from "./index.module.css";
type radioOption = {
value: string;
label: string;
label: string | ReactElement;
};
type IRadioGroupOfButtonStyleProps = {
......@@ -21,6 +21,7 @@ type IRadioGroupOfButtonStyleProps = {
value: string;
handleRadio: any;
RadiosBoxStyle?: object;
radioBoxStyle?: object;
radioStyle?: object;
radioActiveBgBoxStyle?: object;
};
......@@ -31,6 +32,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
value,
handleRadio,
RadiosBoxStyle,
radioBoxStyle,
radioStyle,
radioActiveBgBoxStyle,
} = props;
......@@ -58,6 +60,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
<div className={style.radioActiveBgBox} style={radioActiveBgBoxStyle}>
<div
className={style.radioActiveBg}
// 动画样式绑定
style={{
width: `${radioWidth}%`,
transform: `translateX(${activeIndex * 100}%)`,
......@@ -67,14 +70,17 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
{radioOptions.map((options, index) => {
return (
<>
<div
key={options.value}
className={style.radioBox}
onClick={() => handleRadio(options.value)}
style={radioBoxStyle}
>
<div
key={options.value}
className={classnames({
[style.radio]: true,
[style.radioActive]: value === options.value,
})}
onClick={() => handleRadio(options.value)}
style={radioStyle}
>
{options.label}
......@@ -82,6 +88,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
<div
className={classnames({
[style.border]: true,
// 当相邻的两个tab都是未激活时中间有一条分隔线判断逻辑
[style.borderHidden]: !(
index !== radioOptions.length - 1 &&
index !== activeIndex &&
......@@ -89,7 +96,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
),
})}
></div>
</>
</div>
);
})}
</div>
......
src/components/MyRouter/useMyRouter.ts
View file @ 31c4e0d2
......@@ -27,6 +27,22 @@ const useMyRouter = () => {
);
permissionStore.restAddRoutes();
if (window.location.host === "localhost:8088") {
menuInfo.res.data.forEach((item: any) => {
if (item.id === 'cadd') {
item.routes.push({
element: 'Demo',
id: "demo",
name: "demo",
order: 1000,
path: "/demo",
show: true,
type: "page",
})
}
});
}
for (let item of menuInfo.res.data) {
for (let route of item.routes) {
route.element = elements[route.element] || NotFound;
......
src/components/mui/MyButton.tsx
View file @ 31c4e0d2
......@@ -122,7 +122,7 @@ const theme = createTheme({
minWidth: "60px",
},
sizeMedium: {
"& p": { fontSize: "14px" },
"& p": { fontSize: "14px", lineHeight: "20px" },
height: "32px",
padding: "0 16px",
minWidth: "68px",
......
src/components/mui/MyCheckBox.tsx
View file @ 31c4e0d2
......@@ -57,6 +57,7 @@ const theme = createTheme({
MuiSvgIcon: {
styleOverrides: {
root: {
color: "rgba(209, 214, 222, 1)",
fontSize: "19px",
},
},
......
src/components/mui/MyMultipleMenu.tsx
View file @ 31c4e0d2
......@@ -60,12 +60,22 @@ const theme = createTheme({
styleOverrides: {
root: {
color: "rgba(209, 214, 222, 1)",
"&.MuiCheckbox-indeterminate": {
color: "rgba(19, 112, 255, 1)",
},
"&.Mui-checked": {
color: "rgba(19, 112, 255, 1)",
},
},
},
},
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
},
},
},
},
});
......@@ -82,6 +92,8 @@ type IMyMultipleMenuProps = {
showSelectAll?: boolean; // 是否显示全选
selectAllText?: string; // 全选的文字
showHiddenIcon?: boolean; // 是否显示 展开收起箭头
iconColor?: string; // 展开收起箭头的颜色
topContent?: any; // 在全选上面的元素 在全选上面 常用于解释说明
};
const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
......@@ -93,6 +105,8 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
showSelectAll = false,
selectAllText = "全部",
showHiddenIcon = true,
iconColor,
topContent = null,
} = props;
// 下拉框展示的相对位置参考元素
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
......@@ -138,9 +152,15 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
const randerShowHiddenIcon = () => {
if (Boolean(anchorEl)) {
return <ArrowDropUpIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
return (
<ArrowDropUpIcon sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }} />
);
} else {
return <ArrowDropDownIcon sx={{ color: "rgba(19, 112, 255, 1)" }} />;
return (
<ArrowDropDownIcon
sx={{ color: iconColor || "rgba(19, 112, 255, 1)" }}
/>
);
}
};
......@@ -167,6 +187,7 @@ const MyMultipleMenu = (props: IMyMultipleMenuProps) => {
"aria-labelledby": "basic-button",
}}
>
{topContent}
{showSelectAll && (
<MenuItem onClick={() => handleMenuAllClick()} key="indeterminate">
<Checkbox
......
src/components/mui/MyPagination.tsx
View file @ 31c4e0d2
// 分页组件
import Pagination from "@mui/material/Pagination";
import MySelect from "./MySelect";
import { ThemeProvider, createTheme } from "@mui/material/styles";
const theme = createTheme({
components: {
MuiPagination: {
styleOverrides: {
ul: {
flexWrap: "nowrap",
},
},
},
MuiPaginationItem: {
styleOverrides: {
root: {
......@@ -24,16 +33,69 @@ type IMyPaginationProps = {
page: number;
pageChange: any;
count: number;
totalElements?: number;
type?: "simple" | "complex";
rowsPerPage?: number; // 每页多少条数据
handleChangeRowsPerPage?: any;
};
const MyPagination = (props: IMyPaginationProps) => {
const { page, pageChange, count } = props;
const {
page,
pageChange,
count,
type = "simple",
rowsPerPage = 10,
handleChangeRowsPerPage,
totalElements = 0,
} = props;
const handlePageChange = (e: any, value: number) => {
pageChange && pageChange(value);
};
const rowsPerPageChange = (e: any) => {
handleChangeRowsPerPage(Number(e));
};
return (
<ThemeProvider theme={theme}>
{type === "complex" && (
<>
<span
style={{
marginRight: "20px",
fontSize: "14px",
color: "rgba(30, 38, 51, 1)",
}}
>
总计：{totalElements}
</span>
<MySelect
style={{ marginRight: "20px" }}
value={String(rowsPerPage)}
onChange={(e) => rowsPerPageChange(e)}
size={"small"}
options={[
{
label: "10/页",
value: "10",
},
{
label: "20/页",
value: "20",
},
{
label: "50/页",
value: "50",
},
{
label: "100/页",
value: "100",
},
]}
></MySelect>
</>
)}
<Pagination
page={page + 1} // 请求接口的页码是从0开始的
count={count + 1}
......
src/components/mui/MyPopover.tsx
View file @ 31c4e0d2
......@@ -8,7 +8,7 @@
*/
import { useRef, useEffect, useState } from "react";
import Popover, { PopoverProps } from "@mui/material/Popover";
import Typography from "@mui/material/Typography";
import { ThemeProvider, createTheme } from "@mui/material/styles";
interface IProps extends Omit<PopoverProps, "open"> {
/** 触发行为 */
......@@ -22,7 +22,18 @@ interface IProps extends Omit<PopoverProps, "open"> {
/** open 修改 */
changeOpen: (val: boolean) => void;
}
const theme = createTheme({
components: {
MuiPaper: {
styleOverrides: {
root: {
boxShadow: "0px 3px 10px 0px rgba(0,24,57,0.14)",
},
},
},
},
});
// .css-3bmhjh-MuiPaper-root-MuiPopover-paper
const MyPopover = (props: IProps) => {
const [anchorEl, setAnchorEl] = useState<any | null>(null);
const ref = useRef(null);
......@@ -61,40 +72,42 @@ const MyPopover = (props: IProps) => {
const id = open ? "simple-popover" : undefined;
return (
<div>
<Typography
ref={ref}
aria-owns={id}
onClick={trigger === "click" ? handelClick : undefined}
onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
>
{children}
</Typography>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handlePopoverClose}
sx={{
pointerEvents: trigger === "hover" ? "none" : undefined,
}}
anchorOrigin={
anchorOrigin || {
vertical: "bottom",
horizontal: "center",
<ThemeProvider theme={theme}>
<div>
<div
ref={ref}
aria-owns={id}
onClick={trigger === "click" ? handelClick : undefined}
onMouseEnter={trigger === "hover" ? handlePopoverOpen : undefined}
onMouseLeave={trigger === "hover" ? handlePopoverClose : undefined}
>
{children}
</div>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handlePopoverClose}
sx={{
pointerEvents: trigger === "hover" ? "none" : undefined,
}}
anchorOrigin={
anchorOrigin || {
vertical: "bottom",
horizontal: "center",
}
}
}
transformOrigin={
transformOrigin || {
vertical: "top",
horizontal: "center",
transformOrigin={
transformOrigin || {
vertical: "top",
horizontal: "center",
}
}
}
>
<Typography sx={{ p: 1 }}>{content}</Typography>
</Popover>
</div>
>
{content}
</Popover>
</div>
</ThemeProvider>
);
};
......
src/components/mui/MyTableNew.tsx 0 → 100644
View file @ 31c4e0d2
This diff is collapsed.
src/components/mui/MyTooltip.tsx
View file @ 31c4e0d2
......@@ -8,6 +8,7 @@
*/
import { Tooltip, TooltipProps } from "@mui/material";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { useMemo } from "react";
interface IMyTooltipProps extends Omit<TooltipProps, "title"> {
title?: string | boolean;
......@@ -20,6 +21,7 @@ const theme = createTheme({
tooltip: {
backgroundColor: "rgba(7, 19, 38, .8)",
color: "#fff",
padding: "8px 0",
},
arrow: {
"&:before": {
......@@ -34,12 +36,31 @@ const theme = createTheme({
const MyTooltip = (props: IMyTooltipProps) => {
const { title = false, children, placement = "top", ...other } = props;
const randerTitle = useMemo(() => {
if (title) {
return (
<div
style={{
maxHeight: "36vh",
overflow: "overlay",
padding: "0 16px",
}}
>
{title}
</div>
);
} else {
return "";
}
}, [title]);
return (
<ThemeProvider theme={theme}>
<Tooltip
// interactive={true}
arrow
title={title || ''}
title={randerTitle}
placement={placement}
{...other}
>
......
src/views/MenuLayout/index.module.css
View file @ 31c4e0d2
......@@ -24,10 +24,15 @@
font-size: 14px;
line-height: 22px;
border-left: 3px solid #f7f8fa;
font-weight: 400;
display: flex;
justify-content: flex-start;
align-items: center;
}
.listItem:hover {
background-color: #eef1f5;
border-left: 3px solid #eef1f5;
font-weight: 500;
}
.routerIcon {
vertical-align: middle;
......@@ -39,4 +44,5 @@
border-left: 3px solid #1370ff;
color: #1370ff;
background-color: #e6eaf0;
font-weight: 500;
}
src/views/MenuLayout/index.tsx
View file @ 31c4e0d2
......@@ -32,6 +32,9 @@ const MenuLayout = observer(() => {
const routerIcon = (id: string, isSelect: boolean) => {
try {
if (id === "demo") {
return require("../../assets/project/PROJECT_SETTING.svg");
}
const result = require(`../../assets/project/${id}${
isSelect ? "_BLUE" : ""
}.svg`);
......@@ -77,9 +80,7 @@ const MenuLayout = observer(() => {
}
alt=""
/>
<span style={{ verticalAlign: "middle", fontWeight: "500" }}>
{item.name}
</span>
<span style={{ verticalAlign: "middle" }}>{item.name}</span>
</li>
);
}
......
src/views/Project/ProjectData/DeleteDialog/index.tsx
View file @ 31c4e0d2
......@@ -49,8 +49,8 @@ const DeleteDialog = (props: IDeleteFileProps) => {
if (currentOperateFile) {
return [currentOperateFile];
} else {
return showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1;
return selectIds.map((item) => {
return showList[item];
});
}
}, [currentOperateFile, selectIds, showList]);
......
src/views/Project/ProjectData/MoveFile/index.tsx
View file @ 31c4e0d2
......@@ -102,9 +102,11 @@ const MoveFile = (props: IMoveFileProps) => {
moveFolderArr = [];
}
} else {
moveFolderArr = showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1 && item.type === "directory";
});
moveFolderArr = selectIds
.map((item) => {
return showList[item];
})
.filter((item) => item.type === "directory");
}
pathArr = moveFolderArr.map((item: any) => {
return path === "/" ? `/${item.name}` : `${path}/${item.name}`;
......@@ -147,8 +149,8 @@ const MoveFile = (props: IMoveFileProps) => {
if (currentOperateFile) {
return [currentOperateFile];
} else {
return showList.filter((item: any) => {
return selectIds.indexOf(item.name) !== -1;
return selectIds.map((item) => {
return showList[item];
});
}
}, [currentOperateFile, selectIds, showList]);
......
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.module.css 0 → 100644
View file @ 31c4e0d2
.list {
flex: 1;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.datasetLi {
flex: 1;
min-width: 20%;
margin: 0 16px 16px 0;
border: 1px solid rgba(235, 237, 240, 1);
border-radius: 4px;
min-height: 339px;
max-height: 339px;
box-sizing: border-box;
position: relative;
cursor: pointer;
}
.datasetLi:nth-child(4n) {
margin-right: 0;
}
.datasetLi:nth-last-child(1) {
margin-bottom: 0;
}
.datasetLi:nth-last-child(2) {
margin-bottom: 0;
}
.datasetLi:nth-last-child(3) {
margin-bottom: 0;
}
.datasetLi:nth-last-child(4) {
margin-bottom: 0;
}
.datasetLiTop {
height: 185px;
box-sizing: border-box;
}
.datasetLiBottom {
height: 152px;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex;
flex-direction: column;
}
.datasetLiTitle {
height: 38px;
line-height: 38px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
text-align: center;
font-weight: 600;
width: 100%;
overflow: hidden;
}
.datasetLiDataList {
flex: 1;
overflow: overlay;
}
.noDataList {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
}
.datasetLiDataLi {
height: 28px;
line-height: 28px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
display: flex;
justify-content: space-between;
}
.datasetLiDataLi:nth-child(2n) {
background-color: rgba(235, 237, 240, 1);
}
.datasetLiDataLiKey {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.datasetLiDataLiValue {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.nullBox {
visibility: hidden;
}
.blackCheckBox {
position: absolute;
top: 16px;
right: 20px;
z-index: 1;
width: 15px;
height: 15px;
background-image: url(../../../../../../assets/project/blackCheckBox.svg);
}
.blackCheckBoxActive {
background-image: url(../../../../../../assets/project/blackCheckBoxActive.svg);
}
.blackCheckBox:hover {
background-image: url(../../../../../../assets/project/blackCheckBoxHover.svg);
}
.blackCheckBoxActive:hover {
background-image: url(../../../../../../assets/project/blackCheckBoxActive.svg);
}
src/views/Project/ProjectData/SeeDataset/components/DatasetCardTable/index.tsx 0 → 100644
View file @ 31c4e0d2
import { useMemo } from "react";
import NglView from "@/components/BusinessComponents/NglView";
import KekuleView from "@/components/BusinessComponents/KekuleView";
import MyTooltip from "@/components/mui/MyTooltip";
import Checkbox from "@mui/material/Checkbox";
import style from "./index.module.css";
import classNames from "classnames";
import MyCircularProgress from "@/components/mui/MyCircularProgress";
import NoData from "@/components/BusinessComponents/NoData";
type IDatasetCardTableProps = {
list: Array<any>;
graphicDimension: string;
showData: Array<string>;
selectItems: Array<string>;
setSelectItems: any;
loading: boolean;
};
const DatasetCardTable = (props: IDatasetCardTableProps) => {
const {
list,
graphicDimension,
showData,
selectItems,
setSelectItems,
loading,
} = props;
// 选择/取消分子
const handleSelectItem = (id: string) => {
let list: string[] = [...selectItems];
if (selectItems.filter((e) => e === id).length > 0) {
list = list.filter((e) => e !== id);
setSelectItems(list);
} else {
list.push(id);
setSelectItems(list);
}
};
// 空盒子用于布局
const nullBox = useMemo(() => {
if (list.length > 4) {
let nullBoxLength = Math.abs(8 - list.length);
return new Array(nullBoxLength).fill("");
} else {
return [];
}
}, [list]);
return (
<>
{list.length !== 0 && (
<>
<div className={style.list}>
<MyCircularProgress loading={loading} />
{list.map((item, index) => {
return (
<div
className={style.datasetLi}
key={item.id}
onClick={() => {
handleSelectItem(item.id);
}}
>
<div className={style.datasetLiTop}>
{graphicDimension === "2D" && (
<KekuleView id={`${index}2d`} smi={item.smiles} />
)}
{graphicDimension === "3D" && (
<NglView id={`${index}3d`} content={item.pdb} />
)}
</div>
<div className={style.datasetLiBottom}>
{showData.length !== 0 && (
<div className={style.datasetLiDataList}>
{Object.keys(item)
.filter((key) => showData.indexOf(key) !== -1)
.map((key, index) => {
return (
<div
className={style.datasetLiDataLi}
key={index}
>
<span className={style.datasetLiDataLiKey}>
{key}
</span>
<MyTooltip title={item[key]}>
<span className={style.datasetLiDataLiValue}>
{item[key]}
</span>
</MyTooltip>
</div>
);
})}
</div>
)}
{showData.length === 0 && (
<div className={style.noDataList}>请选择显示数据</div>
)}
</div>
{graphicDimension === "2D" && (
<Checkbox
size="small"
sx={{
padding: "0px",
position: "absolute",
top: "16px",
right: "20px",
zIndex: 1,
}}
checked={selectItems.includes(item.id)}
/>
)}
{graphicDimension === "3D" && (
<div
className={classNames({
[style.blackCheckBox]: true,
[style.blackCheckBoxActive]: selectItems.includes(
item.id
),
})}
/>
)}
</div>
);
})}
{nullBox.map((item, index) => {
return (
<div
className={classNames({
[style.datasetLi]: true,
[style.nullBox]: true,
})}
key={index + "null"}
></div>
);
})}
</div>
</>
)}
{list.length === 0 && <NoData text="未搜索到相关数据"></NoData>}
</>
);
};
export default DatasetCardTable;
src/views/Project/ProjectData/SeeDataset/components/DatasetTable/index.tsx 0 → 100644
View file @ 31c4e0d2
import { useEffect, useMemo, useState } from "react";
import MyTable from "@/components/mui/MyTableNew";
import { sortState } from "@/components/mui/MyTableNew";
type IDatasetTableProps = {
list: Array<any>;
showData: Array<string>;
selectItems: Array<any>;
setSelectItems: any;
sortState: sortState;
setSortState: any;
loading: boolean;
};
const DatasetTable = (props: IDatasetTableProps) => {
const {
list,
showData,
selectItems,
setSelectItems,
sortState,
setSortState,
loading,
} = props;
const [innerWidth, setInnerWidth] = useState(window.innerWidth);
useEffect(() => {
window.addEventListener("resize", () => {
setInnerWidth(window.innerWidth);
});
}, []);
const headCells = useMemo(() => {
let width =
showData.length === 0
? innerWidth - 112
: `${(innerWidth - 112) / showData.length}`;
return showData.map((item) => {
return {
id: item,
label: item,
width,
showOverflowTooltip: true,
sort: true,
};
});
}, [showData, innerWidth]);
return (
<MyTable
rows={list}
headCells={headCells}
hasCheckbox={true}
fixedHead={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
loading={loading}
></MyTable>
);
};
export default DatasetTable;
src/views/Project/ProjectData/SeeDataset/download.tsx → src/views/Project/ProjectData/SeeDataset/components/Download/index.tsx
View file @ 31c4e0d2
......@@ -102,7 +102,6 @@ const Download = (props: IDownloadProps) => {
value={downloadType}
options={options}
onChange={(e) => handleChange(e)}
// fullWidth={true}
title="下载格式"
isTitle={true}
sx={{
......
src/views/Project/ProjectData/SeeDataset/index.module.css
View file @ 31c4e0d2
......@@ -8,17 +8,23 @@
height: 100%;
}
.datasetBoxShowFoot {
padding-bottom: 64px;
padding-bottom: 76px;
}
.top {
margin-bottom: 20px;
position: relative;
margin: 0 -32px;
padding: 0 32px 16px;
}
.topBoxShadow {
box-shadow: 0 5px 4px -4px rgb(0, 0, 0, 0.12);
z-index: 10;
}
.title {
line-height: 22px;
color: rgba(30, 38, 51, 1);
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
margin-bottom: 16px;
}
.screens {
display: flex;
......@@ -30,134 +36,135 @@
justify-content: flex-start;
align-items: center;
}
.screensRight {
display: flex;
justify-content: flex-end;
align-items: center;
.separator {
width: 1px;
height: 20px;
background-color: rgba(230, 232, 235, 1);
margin: 0 15px;
}
.selectShowData {
margin-left: 24px;
font-size: 14px;
.graphicDimension {
line-height: 22px;
padding: 5px 16px;
color: rgba(138, 144, 153, 1);
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.graphicDimensionActive {
color: rgba(19, 112, 255, 1);
background-color: rgba(240, 242, 245, 1);
}
.table {
flex: 1;
overflow-y: overlay;
display: flex;
flex-direction: column;
.marginRight20 {
margin-right: 20px;
}
.list {
flex: 1;
.screensRight {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
position: relative;
}
.datasetLi {
flex: 1;
min-width: 20%;
margin: 0 16px 16px 0;
border: 1px solid rgba(235, 237, 240, 1);
border-radius: 4px;
min-height: 275px;
.searchBox {
width: 662px;
background-color: #fff;
padding: 20px 0 24px 24px;
box-sizing: border-box;
position: relative;
}
.deleteIcon {
cursor: pointer;
width: 16px;
height: 16px;
background-image: url(../../../../assets/project/delete.svg);
background-repeat: no-repeat;
}
.datasetLi:nth-child(4n) {
margin-right: 0;
.deleteIcon:hover {
background-image: url(../../../../assets/project/deleteHover.svg);
}
.datasetLi:nth-last-child(1) {
margin-bottom: 0;
.deleteIconDisabled {
background-image: url(../../../../assets/project/deleteDisable.svg);
cursor: not-allowed;
}
.datasetLi:nth-last-child(2) {
margin-bottom: 0;
.deleteIconDisabled:hover {
background-image: url(../../../../assets/project/deleteDisable.svg);
}
.datasetLi:nth-last-child(3) {
margin-bottom: 0;
.searchTop {
margin-bottom: 12px;
}
.datasetLi:nth-last-child(4) {
margin-bottom: 0;
.searchTopText {
display: inline-block;
line-height: 22px;
font-size: 14px;
color: rgba(30, 38, 51, 1);
margin-right: 16px;
font-weight: 600;
}
.datasetLiTop {
height: 55%;
box-sizing: border-box;
.width250 {
width: 250px;
}
.datasetLiBottom {
height: 45%;
box-sizing: border-box;
background-color: RGBA(247, 248, 250, 1);
display: flex;
flex-direction: column;
.width120 {
width: 120px;
}
.datasetLiTitle {
height: 38px;
line-height: 38px;
color: rgba(19, 112, 255, 1);
font-size: 14px;
text-align: center;
font-weight: 600;
width: 100%;
overflow: hidden;
.width180 {
width: 180px;
}
.datasetLiDataList {
flex: 1;
overflow: overlay;
.searchList {
margin-bottom: 8px;
max-height: 300px;
overflow-y: overlay;
}
.noDataList {
flex: 1;
.searchLi {
display: flex;
justify-content: flex-start;
align-items: center;
justify-content: center;
color: rgba(138, 144, 153, 1);
font-size: 14px;
line-height: 22px;
margin-bottom: 16px;
}
.datasetLiDataLi {
height: 20px;
line-height: 20px;
color: rgba(30, 38, 51, 1);
font-size: 12px;
padding: 0 16px;
.searchFooter {
display: flex;
justify-content: space-between;
align-items: center;
padding-right: 24px;
}
.datasetLiDataLi:nth-child(2n) {
background-color: rgba(235, 237, 240, 1);
}
.datasetLiDataLiKey {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
.searchFooterLeft {
color: rgba(19, 112, 255, 1);
font-size: 14px;
line-height: 22px;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.datasetLiDataLiValue {
max-width: 50%;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
.selectShowData {
font-size: 14px;
color: rgba(30, 38, 51, 1);
cursor: pointer;
}
.pagination {
height: 76px;
min-height: 76px;
.table {
flex: 1;
overflow-y: overlay;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0 -32px;
padding: 0 32px;
}
.foot {
position: absolute;
z-index: 1;
bottom: 0;
background-color: #fff;
width: 100%;
width: calc(100vw - 64px);
box-sizing: border-box;
height: 64px;
padding: 0 32px;
height: 76px;
margin: 0 32px;
display: flex;
justify-content: flex-end;
align-items: center;
box-shadow: 0px -3px 10px 0px rgba(0, 24, 57, 0.04);
}
.nullBox {
visibility: hidden;
.borderTop {
border-top: 1px solid rgba(240, 242, 245, 1);
}
.topContent {
padding: 4px 16px;
color: rgba(138, 144, 153, 1);
line-height: 20px;
font-size: 12px;
}
src/views/Project/ProjectData/UpLoaderFile/index.module.css
View file @ 31c4e0d2
......@@ -14,6 +14,9 @@
margin-bottom: 14px;
font-weight: 600;
}
.tableBox {
height: 350px;
}
.dropBox {
cursor: pointer;
height: 300px;
......
src/views/Project/ProjectData/UpLoaderFile/index.tsx
View file @ 31c4e0d2
......@@ -8,7 +8,7 @@ import style from "./index.module.css";
import MyDialog from "@/components/mui/MyDialog";
import { uuid } from "@/utils/util";
import { useMessage } from "@/components/MySnackbar";
import MyTable from "@/components/mui/MyTable";
import MyTable from "@/components/mui/MyTableNew";
import fileIcon from "@/assets/project/fileIcon.svg";
import noFile from "@/assets/project/noFile.svg";
import uploaderIcon from "@/assets/project/uploaderIcon.svg";
......@@ -149,9 +149,9 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
}, [uploaderDialogOpen]);
const fileListHeadCells = [
{ id: "name", numeric: false, label: "名称", width: "60%" },
{ id: "size", numeric: false, label: "大小", width: "25%" },
{ id: "caozuo", numeric: false, label: "操作", width: "15%" },
{ id: "name", label: "名称", width: 300 },
{ id: "size", label: "大小", width: 120 },
{ id: "caozuo", label: "操作", width: 100 },
];
const renderName = (item: any) => {
......@@ -163,7 +163,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
);
};
const renderSize = (item: any) => {
return <span>{item.size ? storageUnitFromB(Number(item.size)) : "-"}</span>;
return `${item.size ? storageUnitFromB(Number(item.size)) : "-"}`;
};
const handleRowDelete = (index: number) => {
......@@ -175,7 +175,7 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
return (
<MyButton
text="删除"
style={{ position: "relative", left: "-18px" }}
style={{ position: "relative", left: "-18px", height: "22px" }}
variant="text"
size="small"
color="error"
......@@ -224,25 +224,14 @@ const UpLoaderFile = observer((props: IMoveFileProps) => {
</div>
<div className={style.tableBox}>
<MyTable
rowHover={true}
stickyHeader={true}
fixedHead={true}
rows={fileList.map((item: any, index: number) => ({
...item,
name: renderName(item),
size: renderSize(item),
caozuo: renderButtons(item, index),
}))}
rowsPerPage={"99"}
headCells={fileListHeadCells}
footer={false}
// headTableCellStyle={{
// fontSize: "12px",
// lineHeight: "20px",
// color: "#8A9099",
// }}
tableContainerStyle={{
maxHeight: "300px",
}}
/>
</div>
{fileList.length === 0 && (
......
src/views/Project/ProjectData/index.module.css
View file @ 31c4e0d2
.projectData {
position: relative;
height: calc(100vh - 57px);
}
.projectDataStickyTop {
height: 100%;
padding: 28px 24px 64px;
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.projectDataStickyTopPadding {
padding: 28px 24px 24px;
}
.projectDataTitle {
font-size: 18px;
......@@ -15,6 +23,11 @@
.projectDataHeader {
position: relative;
}
.tableBox {
/* flex: 1; */
height: calc(100% - 146px);
}
.projectDataButtonAndSearch {
display: flex;
justify-content: space-between;
......
src/views/Project/ProjectData/index.tsx
View file @ 31c4e0d2
......@@ -2,12 +2,11 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
import style from "./index.module.css";
import classnames from "classnames";
import { IconButton } from "@mui/material";
import MyTable from "@/components/mui/MyTable";
import MyTable from "@/components/mui/MyTableNew";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import refresh from "@/assets/project/refresh.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import folderIcon from "@/assets/project/folderIcon.svg";
import noFile from "@/assets/project/noFile.svg";
import AddFolder from "./AddFolder";
import MoveFile from "./MoveFile";
import DeleteDialog from "./DeleteDialog";
......@@ -73,6 +72,11 @@ const ProjectData = observer(() => {
setPath(locationInfo?.pathName || "/");
}, [location]);
// 切换文件数据集时情况勾选项
useEffect(() => {
setSelectIds([]);
}, [activeTab]);
// 列表展示的数据
const showList = useMemo(() => {
if (activeTab === "file") {
......@@ -86,12 +90,24 @@ const ProjectData = observer(() => {
fileList.push(item);
}
});
return [...folderList, ...fileList];
let arr = [...folderList, ...fileList];
return arr.map((item, index) => {
return {
...item,
id: index,
};
});
} else {
const folderList = list.filter((item: any) => {
return item.type === "directory";
});
return [...folderList, ...dataSetList];
let arr = [...folderList, ...dataSetList];
return arr.map((item, index) => {
return {
...item,
id: index,
};
});
}
}, [list, dataSetList, activeTab]);
......@@ -256,45 +272,16 @@ const ProjectData = observer(() => {
};
// table配置
const versionsHeadCells = useMemo(() => {
if (showCheckBox) {
return [
{ id: "checkbox" },
{ id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
{
id: "mtime",
numeric: false,
label: "创建时间",
width: "25%",
sort: true,
},
{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
];
} else {
return [
{ id: "name", numeric: false, label: "名称", width: "25%" },
{ id: "size", numeric: false, label: "大小", width: "25%", sort: true },
{
id: "mtime",
numeric: false,
label: "创建时间",
width: "25%",
sort: true,
},
{ id: "caozuo", numeric: false, label: "操作", width: "25%" },
];
}
}, [showCheckBox]);
// 点击复选框
const hanldeCheckbox = (e: any) => {
const selectarr = e.map((item: any) => {
let andIndex = item.indexOf("&index=");
return item.slice(5, andIndex);
});
setSelectIds(selectarr);
};
const versionsHeadCells = [
{ id: "name", label: "名称" },
{ id: "size", label: "大小", width: 200 },
{
id: "mtime",
label: "创建时间",
width: 200,
},
{ id: "caozuo", label: "操作", width: 200 },
];
// 文件夹下钻
const handleViewFolders = (item: any) => {
......@@ -312,7 +299,6 @@ const ProjectData = observer(() => {
// 查看数据集
const handleSeeDataset = (item: any) => {
console.log(item);
setSeeDatasetName(item.name);
setShowSeeDataset(true);
};
......@@ -373,6 +359,7 @@ const ProjectData = observer(() => {
position: "relative",
left: "-10px",
minWidth: "10px",
height: "22px",
padding: "0 10px",
visibility:
item.type !== "dataSet" && item.type !== "directory"
......@@ -391,6 +378,7 @@ const ProjectData = observer(() => {
position: "relative",
left: "-10px",
minWidth: "10px",
height: "22px",
padding: "0 10px",
}}
variant="text"
......@@ -410,6 +398,7 @@ const ProjectData = observer(() => {
position: "relative",
left: "-10px",
minWidth: "10px",
height: "22px",
padding: "0 10px",
}}
variant="text"
......@@ -529,7 +518,13 @@ const ProjectData = observer(() => {
if (currentProjectStore.currentProjectInfo.name) {
return (
<div className={style.projectData}>
<div className={style.projectDataStickyTop}>
{/* <div className={style.projectDataStickyTop}> */}
<div
className={classnames({
[style.projectDataStickyTop]: true,
[style.projectDataStickyTopPadding]: selectIds.length === 0,
})}
>
<div className={style.projectDataTitle}>项目数据</div>
<div className={style.projectDataHeader}>
<div className={style.projectDataButtonAndSearch}>
......@@ -593,32 +588,22 @@ const ProjectData = observer(() => {
</div>
</div>
</div>
<MyTable
footer={false}
rowHover={true}
onRef={tableRef}
stickyHeader={true}
initSelected={selectIds}
headCells={versionsHeadCells}
rowsPerPage={"99"}
checkboxData={(e: any) => {
hanldeCheckbox(e);
}}
rows={showList.map((item: any, index: number) => ({
...item,
id: `name=${item.name}&index=${index}`,
name: renderName(item),
size: renderSize(item),
mtime: renderMtime(item),
caozuo: renderButtons(item),
}))}
/>
{showList.length === 0 && (
<div className={style.noDataBox}>
<img className={style.noDataImg} src={noFile} alt="" />
<span className={style.noDataText}>暂无数据</span>
</div>
)}
<div className={style.tableBox}>
<MyTable
fixedHead={true}
hasCheckbox={showCheckBox}
headCells={versionsHeadCells}
selectItems={selectIds}
setSelectItems={setSelectIds}
rows={showList.map((item: any, index: number) => ({
...item,
name: renderName(item),
size: renderSize(item),
mtime: renderMtime(item),
caozuo: renderButtons(item),
}))}
/>
</div>
</div>
{selectIds.length > 0 && (
<div className={style.projectDataStickyBox}>
......@@ -635,7 +620,6 @@ const ProjectData = observer(() => {
/>
<MyButton
text={`批量移动 (${selectIds.length})`}
// color="neutral"
variant="contained"
style={{ marginRight: "24px" }}
onClick={() => {
......
src/views/Project/ProjectJobDetail/TaskInfo/index.tsx 0 → 100644
View file @ 31c4e0d2
import styles from "../index.module.css";
import { ITaskInfo } from "../../ProjectSubmitWork/interface";
import jobSue from "@/assets/project/jobSue.svg";
import jobStop from "@/assets/project/jobStop.svg";
import jobRun from "@/assets/project/jobRun.svg";
import jobFail from "@/assets/project/jobFail.svg";
import taskResultsFileIcon from "@/assets/project/taskResultsFileIcon.svg";
import taskResultsDatasetIcon from "@/assets/project/taskResultsDatasetIcon.svg";
import { IState } from "../../ProjectSubmitWork/interface";
import classNames from "classnames";
type ITaskInfoProps = {
workFlowJobInfo: ITaskInfo;
randerOutputs1: Array<any>;
handleDownLoadOutput: any;
handleShowPopper: any;
setGoToProjectDataPath: any;
setShowLogView: any;
state: IState | undefined;
name: any;
};
const stateMap = {
SUBMITTED: "正在启动",
RUNNING: "正在运行",
ABORTED: "运行终止",
FAILED: "运行失败",
SUCCEEDED: "运行成功",
};
const TaskInfo = (props: ITaskInfoProps) => {
const {
workFlowJobInfo,
randerOutputs1,
handleDownLoadOutput,
handleShowPopper,
setGoToProjectDataPath,
setShowLogView,
state,
name,
} = props;
return (
<div className={styles.taskInfo}>
<div className={styles.title}>
任务结果
<span className={styles.taskResultsNum}>{randerOutputs1.length}</span>
</div>
{workFlowJobInfo?.outputs &&
Object.keys(workFlowJobInfo?.outputs).length > 0 && (
<div className={styles.taskResults}>
{randerOutputs1.map((item, index) => {
return (
<div key={index} className={styles.outputLi}>
<div className={styles.outputLiLeft}>
<img
className={classNames({
[styles.outputLiLeftImg]: true,
[styles.outputLiLeftImgBoxShadow2]:
item.type === "file",
})}
src={
item.type === "file"
? taskResultsFileIcon
: taskResultsDatasetIcon
}
alt=""
/>
<div className={styles.outputLiLeftContent}>
<div className={styles.outputItemName}>{item.name}</div>
<div className={styles.outputLiSize}>{item.size}</div>
</div>
</div>
<div
onClick={(e: any) => {
handleDownLoadOutput(item);
}}
className={classNames({
[styles.outputLiRight]: true,
[styles.seeDataset]: item.type !== "file",
[styles.downloadFile]: item.type === "file",
})}
></div>
</div>
);
})}
</div>
)}
{(!workFlowJobInfo?.outputs ||
Object.keys(workFlowJobInfo?.outputs).length === 0) && (
<div className={styles.notResults}>暂无结果文件</div>
)}
<div className={styles.title}>任务信息</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务名称</div>
<div className={styles.taskInfoValue} title={name}>
{name || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务ID</div>
<div className={styles.taskInfoValue} title={workFlowJobInfo?.id}>
{workFlowJobInfo?.id || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>输出路径</div>
<div
className={classNames({
[styles.taskInfoValue]: true,
[styles.taskInfoValueClick]: true,
})}
onClick={(e: any) => {
handleShowPopper(
e,
"即将跳转至项目数据内该任务的输出路径，确认继续吗？",
"bottom"
);
setGoToProjectDataPath(workFlowJobInfo?.outputPath as string);
}}
>
{workFlowJobInfo?.outputPath || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行状态</div>
<div className={styles.taskInfoValue}>
{state === "SUCCEEDED" && (
<img className={styles.taskInfoValueIcon} src={jobSue} alt="" />
)}
{["SUBMITTED", "RUNNING"].includes(state || "") && (
<img className={styles.taskInfoValueIcon} src={jobRun} alt="" />
)}
{state === "ABORTED" && (
<img className={styles.taskInfoValueIcon} src={jobStop} alt="" />
)}
{state === "FAILED" && (
<img className={styles.taskInfoValueIcon} src={jobFail} alt="" />
)}
{state ? stateMap[state] : "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specTitle || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板版本</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specVersion || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>花费（元）</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.jobCost || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建人</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.creator || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.createTime || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.costTime || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>日志文件</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.logPath && (
<>
<span
className={styles.taskInfoDownload}
onClick={() => setShowLogView(true)}
>
查看
</span>
</>
)}
{!workFlowJobInfo?.logPath && "-"}
</div>
</div>
</div>
);
};
export default TaskInfo;
src/views/Project/ProjectJobDetail/index.module.css
View file @ 31c4e0d2
......@@ -70,37 +70,79 @@
font-weight: 600;
margin-bottom: 16px;
}
.taskResultsNum {
color: rgba(19, 112, 255, 1);
line-height: 24px;
font-size: 16px;
margin-left: 8px;
}
.taskResults {
padding: 24px;
padding: 20px 24px 20px 20px;
background-color: rgba(247, 248, 250, 1);
margin-bottom: 24px;
border-radius: 4px;
}
.outputLi {
display: flex;
justify-content: space-between;
align-items: center;
margin: 6px 0;
margin-bottom: 20px;
}
.outputLi:last-child {
margin-bottom: 0;
}
.outputLiLeft {
cursor: pointer;
display: flex;
align-items: center;
color: rgba(19, 112, 255, 1);
font-size: 14px;
}
.outputLiLeftImg {
box-shadow: 0px 5px 11px -5px rgba(19, 110, 250, 0.64);
}
.outputLiLeftImgBoxShadow2 {
box-shadow: 0px 5px 11px -5px rgba(13, 204, 152, 0.64);
}
.outputItemName {
max-width: 172px;
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
font-size: 14px;
font-weight: 600;
color: rgba(30, 38, 51, 1);
margin-bottom: 4px;
}
.outputLiSize {
line-height: 20px;
font-size: 12px;
color: rgba(138, 144, 153, 1);
}
.outputLiLeftImg {
margin-right: 12px;
margin-right: 16px;
width: 40px;
height: 40px;
}
.outputLiRight {
color: rgba(138, 144, 153, 1);
font-size: 12px;
cursor: pointer;
}
.seeDataset {
width: 18px;
height: 18px;
background-image: url(../../../assets/project/taskResultsSeeIcon.svg);
}
.seeDataset:hover {
background-image: url(../../../assets/project/taskResultsSeeHoverIcon.svg);
}
.downloadFile {
width: 16px;
height: 16px;
background-image: url(../../../assets/project/taskResultsDownloadIcon.svg);
}
.downloadFile:hover {
background-image: url(../../../assets/project/taskResultsDownloadHoverIcon.svg);
}
.notResults {
background-color: rgba(247, 248, 250, 1);
......
src/views/Project/ProjectJobDetail/index.tsx
View file @ 31c4e0d2
......@@ -13,6 +13,7 @@ import classNames from "classnames";
import { useLocation, useNavigate } from "react-router-dom";
import MyButton from "@/components/mui/MyButton";
import TaskInfo from "./TaskInfo";
import useMyRequest from "@/hooks/useMyRequest";
import {
fetchWorkFlowJob,
......@@ -21,15 +22,12 @@ import {
} from "@/api/project_api";
import { IResponse } from "@/api/http";
import jobSue from "@/assets/project/jobSue.svg";
import jobStop from "@/assets/project/jobStop.svg";
import jobRun from "@/assets/project/jobRun.svg";
import fullScreen from "@/assets/project/fullScreen.svg";
import partialScreen from "@/assets/project/partialScreen.svg";
import goback from "@/assets/project/goback.svg";
import CloudEController from "@/api/fileserver/CloudEController";
import jobFail from "@/assets/project/jobFail.svg";
import fileIcon from "@/assets/project/fileIcon.svg";
import dataSetIcon from "@/assets/project/dataSetIcon.svg";
import { useStores } from "@/store";
import { ITaskInfo } from "../ProjectSubmitWork/interface";
import Flow from "../components/Flow";
......@@ -51,14 +49,6 @@ import MyTooltip from "@/components/mui/MyTooltip";
import styles from "./index.module.css";
const stateMap = {
SUBMITTED: "正在启动",
RUNNING: "正在运行",
ABORTED: "运行终止",
FAILED: "运行失败",
SUCCEEDED: "运行成功",
};
const statusMap = {
Done: "运行完成",
Running: "正在运行",
......@@ -207,15 +197,6 @@ const ProjectSubmitWork = observer(() => {
}
};
// 通过文件路径获取文件所在文件夹路径 如 输入 /ProjectData/task_a.out 输出/ProjectData/
// const getFolderPath = (path: string) => {
// const lastIndex = path.lastIndexOf("/");
// if (lastIndex !== -1) {
// path = path.slice(0, lastIndex);
// }
// return path;
// };
// 下载任务结果
const handleDownLoadOutput = (item: any) => {
// 是文件下载
......@@ -483,173 +464,16 @@ const ProjectSubmitWork = observer(() => {
{fullScreenShow ? null : (
<div className={styles.swFormBox}>
{!activeFlowIndex && (
<div className={styles.taskInfo}>
<div className={styles.title}>任务结果</div>
{workFlowJobInfo?.outputs &&
Object.keys(workFlowJobInfo?.outputs).length > 0 && (
<div className={styles.taskResults}>
{randerOutputs1.map((item, index) => {
return (
<div key={index} className={styles.outputLi}>
<div
className={styles.outputLiLeft}
onClick={(e: any) => {
handleDownLoadOutput(item);
}}
>
<img
className={styles.outputLiLeftImg}
src={
item.type === "file" ? fileIcon : dataSetIcon
}
alt=""
/>
<span className={styles.outputItemName}>
{item.name}
</span>
</div>
<span className={styles.outputLiRight}>
{item.size}
</span>
</div>
);
})}
</div>
)}
{(!workFlowJobInfo?.outputs ||
Object.keys(workFlowJobInfo?.outputs).length === 0) && (
<div className={styles.notResults}>暂无结果文件</div>
)}
<div className={styles.title}>任务信息</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务名称</div>
<div className={styles.taskInfoValue} title={name}>
{name || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>任务ID</div>
<div
className={styles.taskInfoValue}
title={workFlowJobInfo?.id}
>
{workFlowJobInfo?.id || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>输出路径</div>
<div
className={classNames({
[styles.taskInfoValue]: true,
[styles.taskInfoValueClick]: true,
})}
onClick={(e: any) => {
handleShowPopper(
e,
"即将跳转至项目数据内该任务的输出路径，确认继续吗？",
"bottom"
);
setGoToProjectDataPath(
workFlowJobInfo?.outputPath as string
);
}}
>
{workFlowJobInfo?.outputPath || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行状态</div>
<div className={styles.taskInfoValue}>
{state === "SUCCEEDED" && (
<img
className={styles.taskInfoValueIcon}
src={jobSue}
alt=""
/>
)}
{["SUBMITTED", "RUNNING"].includes(state || "") && (
<img
className={styles.taskInfoValueIcon}
src={jobRun}
alt=""
/>
)}
{state === "ABORTED" && (
<img
className={styles.taskInfoValueIcon}
src={jobStop}
alt=""
/>
)}
{state === "FAILED" && (
<img
className={styles.taskInfoValueIcon}
src={jobFail}
alt=""
/>
)}
{state ? stateMap[state] : "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specTitle || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>源模板版本</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.specVersion || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>花费（元）</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.jobCost || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建人</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.creator || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>创建时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.createTime || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>运行时间</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.costTime || "-"}
</div>
</div>
<div className={styles.taskInfoLi}>
<div className={styles.taskInfoParams}>日志文件</div>
<div className={styles.taskInfoValue}>
{workFlowJobInfo?.logPath && (
<>
{/* <span
className={styles.taskInfoDownload}
onClick={() => handleDownLoad(workFlowJobInfo?.logPath)}
>
下载
</span> */}
<span
className={styles.taskInfoDownload}
onClick={() => setShowLogView(true)}
>
查看
</span>
</>
)}
{!workFlowJobInfo?.logPath && "-"}
</div>
</div>
</div>
<TaskInfo
workFlowJobInfo={workFlowJobInfo as ITaskInfo}
randerOutputs1={randerOutputs1}
handleDownLoadOutput={handleDownLoadOutput}
handleShowPopper={handleShowPopper}
setGoToProjectDataPath={setGoToProjectDataPath}
setShowLogView={setShowLogView}
state={state}
name={name}
/>
)}
{activeFlowIndex && (
<div className={styles.suanziInfo}>
......@@ -778,12 +602,7 @@ const ProjectSubmitWork = observer(() => {
projectId={projectId as string}
></SeeDataset>
)}
{showLogView && (
<LogView
logs={logs}
setShowLogView={handleClose}
/>
)}
{showLogView && <LogView logs={logs} setShowLogView={handleClose} />}
</div>
);
});
......
src/views/Project/ProjectSetting/ProjectMembers/components/AddMember.tsx
View file @ 31c4e0d2
......@@ -9,15 +9,17 @@
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import _ from "lodash";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { Box, OutlinedInput } from "@mui/material";
import { memo, useCallback, useEffect, useState } from "react";
import { Box } from "@mui/material";
import Dialog from "@/components/mui/MyDialog";
import useMyRequest from "@/hooks/useMyRequest";
import { useStores } from "@/store";
import { useMessage } from "@/components/MySnackbar";
import MyBorderlessSelect, { IOption } from "@/components/mui/MyBorderlessSelect";
import MyTable from "@/components/mui/MyTable";
import MyBorderlessSelect, {
IOption,
} from "@/components/mui/MyBorderlessSelect";
import MyTable from "@/components/mui/MyTableNew";
import SearchInput from "@/components/BusinessComponents/SearchInput";
import {
addProjectUser,
......@@ -35,7 +37,6 @@ const AddMember = observer((props: IProps) => {
const { addMemberDialog, setAddMemberDialog, getTableList } = props;
const { currentProjectStore } = useStores();
const [tableData, setTableData] = useState([]);
const [projectMember, setProjectMember] = useState("");
const [filterTableData, setFilterTableData] = useState([]);
......@@ -54,30 +55,29 @@ const AddMember = observer((props: IProps) => {
[tableData]
);
const columns = useMemo(() => {
return [
{ id: "checkbox", width: 50 },
{ id: "username", label: "项目成员", width: 160 },
{
id: "projectRole",
label: "项目权限",
width: 160,
render: (item: string, row: any, index: number) => {
const defaultValue = selectOptions.filter(
(every) => every.value === item
);
return (
<MyBorderlessSelect
value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
onChange={(val) => changePermission(val, index)}
options={selectOptions}
size="small"
/>
);
},
},
];
}, [changePermission, selectOptions]);
const columns = [
{ id: "username", label: "项目成员", width: 200 },
{
id: "projectRole",
label: "项目权限",
width: 100,
},
];
const randerRole = (item: any, index: number) => {
const defaultValue = selectOptions.filter(
(every) => every.value === item.projectRole
);
return (
<MyBorderlessSelect
value={defaultValue?.length ? defaultValue[0]?.value : "VIEWER"}
onChange={(val) => changePermission(val, index)}
options={selectOptions}
size="small"
sx={{ position: "relative", left: "-13px" }}
/>
);
};
/** 过滤表格数据 */
useEffect(() => {
......@@ -93,11 +93,14 @@ const AddMember = observer((props: IProps) => {
}, [projectMember, tableData]);
// 获取表格数据接口
const { run: getProjectUsersList } = useMyRequest(fetchProjectUsersList, {
onSuccess: (res: any) => {
setTableData(res?.data);
},
});
const { run: getProjectUsersList, loading } = useMyRequest(
fetchProjectUsersList,
{
onSuccess: (res: any) => {
setTableData(res?.data);
},
}
);
// 获取项目权限
const { run: getProjectPower } = useMyRequest(fetchProjectPower, {
......@@ -120,6 +123,7 @@ const AddMember = observer((props: IProps) => {
useEffect(() => {
if (addMemberDialog) {
setProjectMember("");
getProjectPower();
}
}, [addMemberDialog, getProjectPower]);
......@@ -173,23 +177,22 @@ const AddMember = observer((props: IProps) => {
placeholder="搜索项目成员"
sx={{ mb: 2 }}
/>
<div style={{ overflow: "overlay", maxHeight: 400 }}>
<div style={{ height: "320px" }}>
<MyTable
noDataText={
projectMember ? `暂无 "${projectMember}" 搜索结果` : undefined
}
tableContainerStyle={{ height: 346 }}
checkboxData={(val: string[]) => setCheckData(val)}
param="username"
disabledParam={"enabled"}
rowHover={true}
stickyHeader={true}
rows={filterTableData}
rowsPerPage="99"
tableKey="username"
hasCheckbox={true}
selectItems={checkData}
setSelectItems={setCheckData}
fixedHead={true}
rows={filterTableData.map((item: any, idnex) => ({
...item,
projectRole: randerRole(item, idnex),
}))}
headCells={columns}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom="none"
loading={loading}
/>
</div>
</Box>
......
src/views/Project/ProjectSetting/ProjectMembers/index.module.css
View file @ 31c4e0d2
.headerBox {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.removeItemBox {
color: #ff4e4e;
margin-left: 32px;
cursor: pointer;
color: #ff4e4e;
margin-left: 32px;
cursor: pointer;
}
.tableBox {
height: calc(100vh - 300px);
}
src/views/Project/ProjectSetting/ProjectMembers/index.tsx
View file @ 31c4e0d2
......@@ -7,15 +7,12 @@
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import _ from "lodash";
import OutlinedInput from "@mui/material/OutlinedInput";
import { Box } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import Add from "@mui/icons-material/Add";
import { toJS } from "mobx";
import { observer } from "mobx-react";
import MyTable from "@/components/mui/MyTable";
import MyTable from "@/components/mui/MyTableNew";
import { IResponse, useHttp } from "@/api/http";
import RemoveItem from "./components/RemoveItem";
import ChangePermission from "./components/ChangePermission";
......@@ -52,44 +49,44 @@ const ProjectMembers = observer(() => {
const [projectName, setProjectMember] = useState("");
/** 过滤后数据 */
const [filterTableData, setFilterTableData] = useState([]);
const [loading, setLoading] = useState(false);
const randerOperation = (item: any) => {
return item?.projectRole === "OWNER" ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(item);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(item.username);
}}
>
移出项目
</span>
</>
);
};
const columns = useMemo(() => {
const val: any = [
{ id: "username", label: "成员名称" },
{ id: "projectRoleDesc", label: "项目权限" },
let val: any = [
{ id: "username", label: "成员名称", width: 200 },
{ id: "projectRoleDesc", label: "项目权限", width: 200 },
{ id: "phone", label: "联系方式" },
...(projectRole !== "OWNER"
? []
: [
{
id: "operation",
label: "操作",
width: 160,
render: (item: any, row: any) => {
return row?.projectRole === "OWNER" ? null : (
<>
<span
style={{ color: "#1370FF", cursor: "pointer" }}
onClick={() => {
onPermissionBtn(row);
}}
>
更改权限
</span>
<span
className={styles.removeItemBox}
onClick={() => {
onRemoveItemBtn(row.username);
}}
>
移出项目
</span>
</>
);
},
},
]),
];
if (projectRole === "OWNER") {
val.push({
id: "operation",
label: "操作",
width: 180,
});
}
return val;
}, [projectRole]);
......@@ -97,14 +94,19 @@ const ProjectMembers = observer(() => {
const getTableList = useCallback(() => {
const projectInfo = toJS(currentProjectStore?.currentProjectInfo);
if (!projectInfo?.id) return;
setLoading(true);
http
.get<IResponse<any>>("/cpp/project/get", {
params: { id: projectInfo?.id || "" },
})
.then((res) => {
setLoading(false);
const { data = {} } = res;
setTableData(data?.members || []);
setProjectRole(data?.projectRole || "");
})
.catch(() => {
setLoading(false);
});
}, [currentProjectStore?.currentProjectInfo, http]);
......@@ -142,12 +144,12 @@ const ProjectMembers = observer(() => {
projectRole: row?.projectRole || "",
});
};
// 回车搜索
// 回车搜索
const handleKeyWordChangeKeyUp = (e: any) => {
if (e.keyCode === 13) {
setProjectMember(e.target.value);
}
}
if (e.keyCode === 13) {
setProjectMember(e.target.value);
}
};
return (
<>
......@@ -159,7 +161,7 @@ const ProjectMembers = observer(() => {
/>
{currentProjectStore?.currentProjectInfo?.projectRole === "OWNER" ? (
<MyButton
text='添加成员'
text="添加成员"
style={{ backgroundColor: "#1370FF " }}
variant="contained"
onClick={onAddMember}
......@@ -168,16 +170,18 @@ const ProjectMembers = observer(() => {
/>
) : null}
</Box>
<MyTable
rowHover={true}
stickyHeader={true}
rows={filterTableData}
rowsPerPage={"99"}
headCells={columns}
footer={false}
tableStyle={{ minWidth: "auto" }}
borderBottom={"none"}
/>
<div className={styles.tableBox}>
<MyTable
fixedHead={true}
rows={filterTableData.map((item: any, index) => ({
...item,
operation: randerOperation(item),
}))}
tableKey="username"
headCells={columns}
loading={loading}
/>
</div>
<RemoveItem
removeDialog={removeDialog}
setRemoveDialog={setRemoveDialog}
......@@ -188,11 +192,13 @@ const ProjectMembers = observer(() => {
getTableList={getTableList}
setPermissionDialog={setPermissionDialog}
/>
<AddMember
addMemberDialog={addMemberDialog}
setAddMemberDialog={setAddMemberDialog}
getTableList={getTableList}
/>
{addMemberDialog && (
<AddMember
addMemberDialog={addMemberDialog}
setAddMemberDialog={setAddMemberDialog}
getTableList={getTableList}
/>
)}
</>
);
});
......
src/views/Project/ProjectSubmitWork/interface.ts
View file @ 31c4e0d2
......@@ -132,4 +132,4 @@ export interface ITaskInfo extends ITemplateConfig {
outputs?: any; // 结果文件
}
type IState = "SUCCEEDED" | "RUNNING" | "ABORTED" | "FAILED";
export type IState = "SUCCEEDED" | "RUNNING" | "ABORTED" | "FAILED";
src/views/demo/MyTableDemo/index.tsx 0 → 100644
View file @ 31c4e0d2
import { useState } from "react";
import MyButton from "@/components/mui/MyButton";
import { sortState } from "@/components/mui/MyTableNew";
import MyTable from "@/components/mui/MyTableNew";
const MyTableDemo = () => {
const [page, setPage] = useState(0);
const [count, setCount] = useState(5);
const [rowsPerPage, setRowsPerPage] = useState(10);
const pageChange = (value: number) => {
setPage(value - 1);
};
const [sortState, setSortState] = useState<sortState>({
field: "",
order: "",
});
const rows = [
{
a: "啊手动阀建行卡实际付款啦即使对方卢卡库上的飞机啊离开解放了；拉萨的飞机拉萨酱豆腐啊肌肤抵抗力就",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "1",
},
{
a: "asdf",
b: "asdg",
c: "asdasdffasf",
d: "sfgh",
e: "asdgshdsdfh534",
id: "2",
},
{
a: "dfgj",
b: "xcvb",
c: "xcvb",
d: "xcvb",
e: "ert",
id: "3",
},
{
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: "4",
},
{
a: "as123",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "5",
},
{
a: "asdf",
b: "asdg",
c: "asdasdffasf",
d: "sfgh",
e: "asdgshdsdfh534",
id: "6",
},
{
a: "dfgj",
b: "xcvb",
c: "xcvb",
d: "xcvb",
e: "ert",
id: "7",
},
{
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: "8",
},
{
a: "as123",
b: "werewrw",
c: "asdfasf",
d: "asdfasdf",
e: "asd4534",
id: "9",
},
{
a: "asdf",
b: "asdg",
c: "asdasdffasf",
d: "sfgh",
e: "asdgshdsdfh534",
id: "10",
},
{
a: "dfgj",
b: "xcvb",
c: "xcvb",
d: "xcvb",
e: "ert",
id: "11",
},
{
a: "xcgh",
b: "sdf",
c: "sdfg",
d: "sdfg",
e: "wertwe",
id: "12",
},
];
const buttonHeadCells = [
{
id: "a",
label: "属性a",
width: 150,
},
{
id: "b",
label: "属性b",
width: 150,
},
{
id: "c",
label: "属性c",
width: 150,
},
{
id: "d",
label: "属性d",
},
{
id: "caozuo",
label: "操作",
width: 150,
},
];
const headCells = [
{
id: "a",
label: "属性a",
width: 200,
showOverflowTooltip: true,
},
{
id: "b",
label: "属性b",
width: 200,
},
{
id: "c",
label: "属性c",
// width: "200",
},
{
id: "d",
label: "属性d",
width: 200,
},
];
const sortHeadCells = [
{
id: "a",
label: "属性a",
width: 200,
sort: true,
},
{
id: "b",
label: "属性b",
width: 200,
sort: true,
},
{
id: "c",
label: "属性c",
width: 200,
},
{
id: "d",
label: "属性d",
},
];
const [selectItems, setSelectItems] = useState(["1"]);
const handleDelete = (e: string) => {
console.log(e);
};
console.log(selectItems);
return (
<div>
<h2>常规表格</h2>
<div>
<MyTable
rows={rows.map((row) => {
return {
...row,
caozuo: (
<MyButton
text="删除"
onClick={() => {
handleDelete(row.id);
}}
></MyButton>
),
};
})}
// rows={[]}
headCells={buttonHeadCells}
selectItems={selectItems}
setSelectItems={setSelectItems}
/>
</div>
<h2>有复选框表格</h2>
<div>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
/>
</div>
<h2>固定表头(需要指定每列宽度 不然对不齐)表格，内容滚动, </h2>
<div style={{ height: "300" }}>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
fixedHead={true}
/>
</div>
<h2>带分页的表格</h2>
<div>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
hasTableFooter={true}
page={page}
count={count}
pageChange={pageChange}
paginationType={"complex"}
rowsPerPage={rowsPerPage}
handleChangeRowsPerPage={setRowsPerPage}
totalElements={12}
/>
</div>
<h2>带分页且固定表头(需要指定每列宽度 不然对不齐)的表格</h2>
<div style={{ height: "300" }}>
<MyTable
rows={rows}
headCells={headCells}
hasCheckbox={true}
selectItems={selectItems}
setSelectItems={setSelectItems}
fixedHead={true}
hasTableFooter={true}
page={page}
count={count}
pageChange={pageChange}
/>
</div>
<h2>
带排序表格(headCells中sort为true， 传入sortState、setSortState字段)
</h2>
<div>
<MyTable
rows={rows}
headCells={sortHeadCells}
selectItems={selectItems}
setSelectItems={setSelectItems}
sortState={sortState}
setSortState={setSortState}
/>
</div>
</div>
);
};
export default MyTableDemo;
src/views/demo/index.module.css 0 → 100644
View file @ 31c4e0d2
.demoBox {
padding: 16px 16px 0;
box-sizing: border-box;
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
.demoContentBox {
padding-top: 16px;
flex: 1;
}
src/views/demo/index.tsx
View file @ 31c4e0d2
import { useMessage } from "@/components/MySnackbar";
// import usePass from "@/hooks/usePass";
import { operation, route } from "@/router";
import { Button } from "@mui/material";
import { Box } from "@mui/system";
import { useEffect } from "react";
import MyTableDemo from "./MyTableDemo";
import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
import { useCallback, useMemo, useState } from "react";
import styles from "./index.module.css";
const Demo = ({
childrenRoutes,
}: {
childrenRoutes?: Array<route | operation>;
}) => {
const message = useMessage();
// const isPass = usePass();
useEffect(() => {
// console.log(isPass("PROJECT_OVERIVEW_CREATE"), "11111111111");
// console.log(isPass("PROJECT_SUMMARY_MEMBER"), "2222222");
// console.log(isPass("test"), "33333");
// eslint-disable-next-line react-hooks/exhaustive-deps
const Demo = () => {
const demoList = useCallback(() => {
return [
{
name: "表格",
element: MyTableDemo,
},
{
name: "box",
element: () => {
return <div>box</div>;
},
},
];
}, []);
const radioOptionsArr = [
{
value: "表格",
label: "表格",
},
{
value: "box",
label: "box",
},
];
const handleRadio = (e: string) => {
setSelectDemo(e);
};
const [selectDemo, setSelectDemo] = useState("表格");
const randerDemo = useMemo(() => {
return demoList().filter((item) => item.name === selectDemo)[0].element;
}, [selectDemo, demoList]);
return (
<Box>
<Box>{JSON.stringify(childrenRoutes)}</Box>
<Box>{JSON.stringify(process.env.NODE_ENV)}</Box>
<Button onClick={() => message.success("测试测试")}>message测试</Button>
</Box>
<div className={styles.demoBox}>
<RadioGroupOfButtonStyle
value={selectDemo}
radioOptions={radioOptionsArr}
handleRadio={handleRadio}
/>
<div className={styles.demoContentBox}>{randerDemo()}</div>
</div>
);
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment