初始化项目
This commit is contained in:
@@ -31,12 +31,31 @@ export interface MyProjectInfo extends BasicModel<MyProjectInfo> {
|
||||
updateTime?: string; // 更新时间
|
||||
}
|
||||
|
||||
|
||||
export interface MyProjectParams extends BasicModel<MyProjectParams> {
|
||||
pageNum: number; // 当前页
|
||||
pageSize: number; // 每页条数
|
||||
projectName: string; // 项目名称
|
||||
projectType: string; // 项目类型
|
||||
projectStatus: string; // 项目状态
|
||||
}
|
||||
|
||||
export interface PageResult<T> extends BasicModel<PageResult<T>> {
|
||||
list: T[]; // 对应后端 List<T> list
|
||||
currentPage: number; // 当前页
|
||||
pageSize: number; // 每页条数
|
||||
total: number; // 总条数
|
||||
}
|
||||
|
||||
export const myProjectInfoList = (params?: MyProjectInfo | any) =>
|
||||
defHttp.get<MyProjectInfo>({ url: adminPath + '/biz/myProjectInfo/list', params });
|
||||
|
||||
export const myProjectInfoListAll = (params?: MyProjectInfo | any) =>
|
||||
defHttp.get<MyProjectInfo[]>({ url: adminPath + '/biz/myProjectInfo/listAll', params });
|
||||
|
||||
export const myProjectInfoPageList = (params?: MyProjectParams | any) =>
|
||||
defHttp.get<PageResult<MyProjectInfo>>({ url: adminPath + '/biz/myProjectInfo/projectList', params });
|
||||
|
||||
export const myProjectInfoListData = (params?: MyProjectInfo | any) =>
|
||||
defHttp.post<Page<MyProjectInfo>>({ url: adminPath + '/biz/myProjectInfo/listData', params });
|
||||
|
||||
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div class="biz-apps-card">
|
||||
<div class="card-title">
|
||||
<span>常用应用</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<button v-for="item in appList" :key="item.id" class="biz-apps-item" type="button" @click="handleOpen(item)">
|
||||
<div class="biz-apps-item__main">
|
||||
<div class="biz-apps-item__pane biz-apps-item__pane--left">左侧区域</div>
|
||||
<div class="biz-apps-item__pane biz-apps-item__pane--right">右侧区域</div>
|
||||
</div>
|
||||
<div class="biz-apps-item__name">{{ item.name }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ref } from 'vue';
|
||||
|
||||
interface BizAppItem {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const appList = ref<BizAppItem[]>([
|
||||
{
|
||||
id: 'oa',
|
||||
name: '协同办公',
|
||||
url: '/oa',
|
||||
},
|
||||
{
|
||||
id: 'erp',
|
||||
name: 'ERP系统',
|
||||
url: '/erp',
|
||||
},
|
||||
{
|
||||
id: 'mes',
|
||||
name: 'MES平台',
|
||||
url: '/mes',
|
||||
},
|
||||
{
|
||||
id: 'crm',
|
||||
name: 'CRM系统',
|
||||
url: '/crm',
|
||||
},
|
||||
{
|
||||
id: 'hr',
|
||||
name: '人资门户',
|
||||
url: '/hr',
|
||||
},
|
||||
{
|
||||
id: 'bi',
|
||||
name: '数据驾驶舱',
|
||||
url: '/bi',
|
||||
},
|
||||
]);
|
||||
|
||||
function handleOpen(item: BizAppItem) {
|
||||
ElMessage.success(`准备进入：${item.name}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.biz-apps-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: rgb(51 65 85);
|
||||
border-bottom: 1px solid rgb(226 232 240);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-rows: minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.biz-apps-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
border-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(147 197 253);
|
||||
box-shadow: 0 12px 28px rgb(96 165 250 / 20%);
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__pane {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
background: rgb(255, 255, 255);
|
||||
color: rgb(51 65 85);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
}
|
||||
|
||||
&__name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 28px;
|
||||
margin-top: 2px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
color: rgb(51 65 85);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .biz-apps-card {
|
||||
background: rgb(20, 20, 20);
|
||||
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
}
|
||||
|
||||
.biz-apps-item {
|
||||
border-color: rgb(51 65 85);
|
||||
background: rgb(20, 20, 20);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(96 165 250);
|
||||
box-shadow: 0 14px 32px rgb(37 99 235 / 22%);
|
||||
}
|
||||
|
||||
&__pane,
|
||||
&__pane--left,
|
||||
&__pane--right {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
color: rgb(226 232 240);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
&__name {
|
||||
border-top-color: rgb(51 65 85);
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.biz-apps-card {
|
||||
.card-content {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -283,12 +283,16 @@
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
@@ -322,7 +326,7 @@
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 16px;
|
||||
padding: 8px 12px 12px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
}
|
||||
@@ -330,7 +334,7 @@
|
||||
.host-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
align-items: stretch;
|
||||
min-height: 0;
|
||||
@@ -343,9 +347,9 @@
|
||||
min-width: 0;
|
||||
min-height: 160px;
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
background: rgb(248, 250, 252);
|
||||
box-shadow: 0 10px 28px rgb(148 163 184 / 16%);
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -361,7 +365,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
min-width: 0;
|
||||
@@ -376,9 +380,9 @@
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 10px 12px;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
background: rgb(248, 250, 252);
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
overflow: hidden;
|
||||
transition:
|
||||
@@ -387,7 +391,7 @@
|
||||
background 0.2s ease;
|
||||
|
||||
&__label {
|
||||
margin-top: 6px;
|
||||
margin-top: 4px;
|
||||
color: rgb(71 85 105);
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
@@ -397,8 +401,8 @@
|
||||
|
||||
&__chart {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
min-height: 72px;
|
||||
height: 68px;
|
||||
min-height: 68px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@@ -409,6 +413,8 @@
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .host-card {
|
||||
background: rgb(20, 20, 20);
|
||||
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
@@ -433,7 +439,7 @@
|
||||
|
||||
.host-gauge-panel {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
.metric-item {
|
||||
@@ -445,7 +451,7 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 14px 32px rgb(37 99 235 / 22%);
|
||||
box-shadow: 0 12px 28px rgb(96 165 250 / 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,12 +215,16 @@
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
@@ -283,7 +287,7 @@
|
||||
.el-table {
|
||||
width: 100%;
|
||||
--el-table-border-color: transparent;
|
||||
--el-table-header-bg-color: rgb(248, 250, 252);
|
||||
--el-table-header-bg-color: rgb(255, 255, 255);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: rgb(241 245 249);
|
||||
--el-table-text-color: rgb(71 85 105);
|
||||
@@ -305,7 +309,7 @@
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
background: rgb(248, 250, 252);
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
td.el-table__cell,
|
||||
@@ -350,15 +354,15 @@
|
||||
}
|
||||
|
||||
&__divider {
|
||||
margin: 16px 0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
&__content-panel,
|
||||
&__attachments-panel {
|
||||
padding: 2px;
|
||||
padding: 4px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: rgb(248 252 255);
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -366,7 +370,7 @@
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgb(219 234 254);
|
||||
background: rgb(248 252 255);
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
&__title {
|
||||
@@ -402,7 +406,7 @@
|
||||
max-height: 320px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgb(191 219 254);
|
||||
border-radius: 6px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255);
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
@@ -452,8 +456,8 @@
|
||||
margin-bottom: 12px;
|
||||
padding: 0 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: rgb(239 246 255);
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgb(51 65 85);
|
||||
@@ -492,9 +496,9 @@
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgb(219 234 254);
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(180deg, rgb(255 255 255) 0%, rgb(248 250 252) 100%);
|
||||
box-shadow: 0 6px 16px rgb(148 163 184 / 12%);
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
font-size: 13px;
|
||||
color: rgb(71 85 105);
|
||||
transition:
|
||||
@@ -549,8 +553,8 @@
|
||||
&__attachment-item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(147 197 253);
|
||||
background: linear-gradient(180deg, rgb(239 246 255) 0%, rgb(219 234 254) 100%);
|
||||
box-shadow: 0 10px 22px rgb(96 165 250 / 18%);
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 12px 28px rgb(96 165 250 / 20%);
|
||||
color: rgb(30 41 59);
|
||||
}
|
||||
|
||||
@@ -570,13 +574,13 @@
|
||||
|
||||
.el-dialog__header {
|
||||
margin-right: 0;
|
||||
padding: 12px 12px 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgb(226 232 240) !important;
|
||||
background: rgb(255 255 255) !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 2px;
|
||||
padding: 4px 16px 16px;
|
||||
background: rgb(255 255 255) !important;
|
||||
}
|
||||
|
||||
@@ -587,6 +591,7 @@
|
||||
|
||||
html[data-theme='dark'] .notice-card {
|
||||
box-shadow: none;
|
||||
background: rgb(20, 20, 20);
|
||||
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
@@ -663,7 +668,7 @@
|
||||
&__attachments-empty {
|
||||
border-color: rgb(71 85 105);
|
||||
background: rgb(20, 20, 20);
|
||||
box-shadow: 0 6px 16px rgb(2 6 23 / 26%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
@@ -682,7 +687,7 @@
|
||||
&__attachment-item:hover {
|
||||
border-color: rgb(96 165 250);
|
||||
background: rgb(37 99 235 / 22%);
|
||||
box-shadow: 0 10px 24px rgb(59 130 246 / 20%);
|
||||
box-shadow: 0 14px 32px rgb(37 99 235 / 22%);
|
||||
color: rgb(241 245 249);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,685 @@
|
||||
<template>
|
||||
<div class="oper-log-card">
|
||||
<div class="card-title">
|
||||
<span>项目信息</span>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="query-panel">
|
||||
<el-form :model="searchForm" inline class="query-form" @submit.prevent>
|
||||
<el-form-item label="项目名称">
|
||||
<el-input v-model="searchForm.projectName" placeholder="请输入项目名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="项目类型">
|
||||
<el-select v-model="searchForm.projectType" placeholder="请选择项目类型" clearable>
|
||||
<el-option label="新增" value="新增" />
|
||||
<el-option label="修改" value="修改" />
|
||||
<el-option label="删除" value="删除" />
|
||||
<el-option label="导出" value="导出" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目状态">
|
||||
<el-select v-model="searchForm.projectStatus" placeholder="请选择项目状态" clearable>
|
||||
<el-option label="成功" value="成功" />
|
||||
<el-option label="失败" value="失败" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="query-form__actions">
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
|
||||
<el-button :icon="RefreshRight" @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="table-panel">
|
||||
<div class="table-panel__body">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="sourceData"
|
||||
height="100%"
|
||||
:border="false"
|
||||
:show-header="true"
|
||||
show-summary
|
||||
:summary-method="getSummaries"
|
||||
>
|
||||
<el-table-column prop="projectCode" label="项目编码" min-width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="projectName" label="项目名称" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="projectType" label="项目类型" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="priority" label="项目级别" width="100" show-overflow-tooltip />
|
||||
<el-table-column prop="projectStatus" label="项目状态" width="100" />
|
||||
<el-table-column prop="budget" label="项目预算" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="startDate" label="开始日期" width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="endDate" label="结束日期" width="150" show-overflow-tooltip />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<div class="pagination-panel">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-sizes="[10, 20, 50, 99]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
size="small"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RefreshRight, Search } from '@element-plus/icons-vue';
|
||||
import type { TableColumnCtx } from 'element-plus';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { MyProjectInfo, myProjectInfoPageList } from '@jeesite/biz/api/biz/myProjectInfo';
|
||||
|
||||
const sourceData = ref<MyProjectInfo[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm = reactive({
|
||||
projectName: '',
|
||||
projectType: '',
|
||||
projectStatus: '',
|
||||
});
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const total = ref(0);
|
||||
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
Object.assign(searchForm, {
|
||||
projectName: '',
|
||||
projectType: '',
|
||||
projectStatus: '',
|
||||
});
|
||||
currentPage.value = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
pageSize.value = val;
|
||||
currentPage.value = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val: number) => {
|
||||
currentPage.value = val;
|
||||
getList();
|
||||
};
|
||||
|
||||
async function getList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const reqParmas = {
|
||||
...searchForm,
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
};
|
||||
const res = await myProjectInfoPageList(reqParmas);
|
||||
total.value = res?.total || 0;
|
||||
sourceData.value = res?.list || [];
|
||||
} catch (error) {
|
||||
sourceData.value = [];
|
||||
total.value = 0;
|
||||
console.error('获取数据失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
function getSummaries({ columns, data }: { columns: TableColumnCtx<MyProjectInfo>[]; data: MyProjectInfo[] }) {
|
||||
return columns.map((column, index) => {
|
||||
if (index === 0) return '合计';
|
||||
if (column.property !== 'budget') return '';
|
||||
const totalBudget = data.reduce((sum, row) => {
|
||||
const budget = Number(row.budget || 0);
|
||||
return Number.isFinite(budget) ? sum + budget : sum;
|
||||
}, 0);
|
||||
return totalBudget.toLocaleString('zh-CN');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.oper-log-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: rgb(51 65 85);
|
||||
border-bottom: 1px solid rgb(226 232 240);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 12px;
|
||||
color: rgb(71 85 105);
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.query-panel,
|
||||
.table-panel {
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
}
|
||||
|
||||
.query-panel {
|
||||
flex-shrink: 0;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.query-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
|
||||
align-items: end;
|
||||
gap: 12px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select) {
|
||||
--el-fill-color-blank: rgb(255, 255, 255);
|
||||
--el-bg-color: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-select__wrapper) {
|
||||
--el-fill-color-blank: rgb(255, 255, 255);
|
||||
--el-bg-color: rgb(255, 255, 255);
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 0 0 1px rgb(226 232 240) inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner),
|
||||
:deep(.el-select__selected-item),
|
||||
:deep(.el-select__placeholder),
|
||||
:deep(.el-input__inner::placeholder) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
min-width: 172px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-panel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 8px 12px 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
width: 100%;
|
||||
--el-table-border-color: transparent;
|
||||
--el-table-header-bg-color: rgb(255, 255, 255);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: rgb(241 245 249);
|
||||
--el-table-text-color: rgb(71 85 105);
|
||||
--el-table-header-text-color: rgb(51 65 85);
|
||||
background: transparent;
|
||||
|
||||
&::before,
|
||||
&::after,
|
||||
.el-table__inner-wrapper::before,
|
||||
.el-table__border-left-patch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
th.el-table__cell,
|
||||
td.el-table__cell {
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
border-bottom: 1px solid rgb(226 232 240);
|
||||
}
|
||||
|
||||
.el-table__footer-wrapper td.el-table__cell {
|
||||
background: rgb(255, 255, 255);
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-table__footer-wrapper .cell {
|
||||
color: rgb(51 65 85);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
td.el-table__cell,
|
||||
th.el-table__cell {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.cell {
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-panel {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 12px;
|
||||
margin-top: auto;
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card {
|
||||
background: rgb(20, 20, 20);
|
||||
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
}
|
||||
|
||||
.query-panel,
|
||||
.table-panel {
|
||||
background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgb(28 28 28) 100%);
|
||||
box-shadow: 0 10px 24px rgb(0 0 0 / 24%);
|
||||
}
|
||||
|
||||
.query-form {
|
||||
:deep(.el-form-item__label) {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper),
|
||||
:deep(.el-select__wrapper) {
|
||||
--el-fill-color-blank: rgb(20, 20, 20);
|
||||
--el-bg-color: rgb(20, 20, 20);
|
||||
background: rgb(20, 20, 20);
|
||||
box-shadow: 0 0 0 1px rgb(71 85 105) inset;
|
||||
}
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select) {
|
||||
--el-fill-color-blank: rgb(20, 20, 20);
|
||||
--el-bg-color: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown),
|
||||
:deep(.el-popper),
|
||||
:deep(.el-select__popper.el-popper) {
|
||||
background: rgb(20, 20, 20);
|
||||
border-color: rgb(51 65 85);
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item) {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item.hover),
|
||||
:deep(.el-select-dropdown__item:hover),
|
||||
:deep(.el-select-dropdown__item.is-hovering) {
|
||||
background: rgb(30 41 59);
|
||||
color: rgb(241 245 249);
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__item.is-selected) {
|
||||
color: rgb(147 197 253);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner),
|
||||
:deep(.el-input__inner::placeholder),
|
||||
:deep(.el-select__selected-item),
|
||||
:deep(.el-select__placeholder) {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper.is-focus),
|
||||
:deep(.el-select__wrapper.is-focused) {
|
||||
box-shadow: 0 0 0 1px rgb(96 165 250) inset;
|
||||
}
|
||||
|
||||
:deep(.el-select__caret),
|
||||
:deep(.el-input__icon),
|
||||
:deep(.el-select__suffix),
|
||||
:deep(.el-input__suffix),
|
||||
:deep(.el-input__clear),
|
||||
:deep(.el-select__caret.el-icon),
|
||||
:deep(.el-select__caret .el-icon) {
|
||||
color: rgb(148 163 184);
|
||||
}
|
||||
|
||||
:deep(.el-input__clear:hover),
|
||||
:deep(.el-select__caret:hover),
|
||||
:deep(.el-input__suffix-inner:hover) {
|
||||
color: rgb(191 219 254);
|
||||
}
|
||||
|
||||
:deep(.el-button) {
|
||||
--el-fill-color-blank: rgb(30 41 59);
|
||||
--el-bg-color: rgb(30 41 59);
|
||||
border-color: rgb(71 85 105);
|
||||
background: rgb(30 41 59);
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
|
||||
:deep(.el-button:hover) {
|
||||
border-color: rgb(96 165 250);
|
||||
background: rgb(37 99 235 / 22%);
|
||||
color: rgb(241 245 249);
|
||||
}
|
||||
|
||||
:deep(.el-button--primary) {
|
||||
border-color: rgb(59 130 246);
|
||||
background: rgb(37 99 235);
|
||||
color: rgb(248 250 252);
|
||||
}
|
||||
|
||||
:deep(.el-button--primary:hover) {
|
||||
border-color: rgb(96 165 250);
|
||||
background: rgb(59 130 246);
|
||||
color: rgb(248 250 252);
|
||||
}
|
||||
}
|
||||
|
||||
.table-panel {
|
||||
.el-table {
|
||||
--el-table-border-color: transparent;
|
||||
--el-table-header-bg-color: rgb(20, 20, 20);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: rgb(30 41 59);
|
||||
--el-table-text-color: rgb(148 163 184);
|
||||
--el-table-header-text-color: rgb(226 232 240);
|
||||
background: transparent;
|
||||
|
||||
th.el-table__cell {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
th.el-table__cell,
|
||||
td.el-table__cell {
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
}
|
||||
|
||||
.el-table__footer-wrapper td.el-table__cell {
|
||||
background: rgb(20, 20, 20);
|
||||
border-top: 1px solid rgb(51 65 85);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-table__footer-wrapper .cell {
|
||||
color: rgb(226 232 240);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-panel {
|
||||
border-top: 1px solid rgb(51 65 85);
|
||||
background: transparent;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
--el-pagination-text-color: rgb(226 232 240);
|
||||
--el-pagination-button-color: rgb(226 232 240);
|
||||
--el-pagination-button-bg-color: rgb(30 41 59);
|
||||
--el-pagination-hover-color: rgb(147 197 253);
|
||||
}
|
||||
|
||||
:deep(.btn-prev),
|
||||
:deep(.btn-next),
|
||||
:deep(.el-pager li),
|
||||
:deep(.el-pagination button) {
|
||||
background: rgb(30 41 59) !important;
|
||||
color: rgb(226 232 240) !important;
|
||||
}
|
||||
|
||||
:deep(.el-pager li.is-active) {
|
||||
background: rgb(37 99 235) !important;
|
||||
color: rgb(248 250 252) !important;
|
||||
}
|
||||
|
||||
:deep(.el-pagination__total),
|
||||
:deep(.el-pagination__jump),
|
||||
:deep(.el-pagination__sizes) {
|
||||
color: rgb(226 232 240) !important;
|
||||
}
|
||||
|
||||
:deep(.el-pagination .el-input__wrapper),
|
||||
:deep(.el-pagination .el-select__wrapper) {
|
||||
--el-fill-color-blank: rgb(20, 20, 20);
|
||||
--el-bg-color: rgb(20, 20, 20);
|
||||
background: rgb(20, 20, 20) !important;
|
||||
box-shadow: 0 0 0 1px rgb(71 85 105) inset !important;
|
||||
}
|
||||
|
||||
:deep(.el-pagination .el-input__inner),
|
||||
:deep(.el-pagination .el-select__selected-item),
|
||||
:deep(.el-pagination .el-input__inner::placeholder) {
|
||||
color: rgb(226 232 240) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-select__popper,
|
||||
html[data-theme='dark'] .el-popper,
|
||||
html[data-theme='dark'] .el-select-dropdown {
|
||||
--el-bg-color-overlay: rgb(20, 20, 20);
|
||||
--el-fill-color-blank: rgb(20, 20, 20);
|
||||
background: rgb(20, 20, 20) !important;
|
||||
border-color: rgb(51 65 85) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-popper__arrow::before,
|
||||
html[data-theme='dark'] .el-select__popper .el-popper__arrow::before {
|
||||
background: rgb(20, 20, 20) !important;
|
||||
border-color: rgb(51 65 85) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-select-dropdown__item {
|
||||
color: rgb(226 232 240) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-select-dropdown__item.hover,
|
||||
html[data-theme='dark'] .el-select-dropdown__item:hover,
|
||||
html[data-theme='dark'] .el-select-dropdown__item.is-hovering {
|
||||
background: rgb(30 41 59) !important;
|
||||
color: rgb(241 245 249) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-select-dropdown__item.is-selected {
|
||||
color: rgb(147 197 253) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-pagination .btn-prev,
|
||||
html[data-theme='dark'] .el-pagination .btn-next,
|
||||
html[data-theme='dark'] .el-pagination .el-pager li,
|
||||
html[data-theme='dark'] .el-pagination button {
|
||||
background: rgb(30 41 59) !important;
|
||||
color: rgb(226 232 240) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-pagination .el-pager li.is-active {
|
||||
background: rgb(37 99 235) !important;
|
||||
color: rgb(248 250 252) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .el-pagination .el-input__wrapper,
|
||||
html[data-theme='dark'] .el-pagination .el-select__wrapper {
|
||||
--el-fill-color-blank: rgb(20, 20, 20);
|
||||
--el-bg-color: rgb(20, 20, 20);
|
||||
background: rgb(20, 20, 20) !important;
|
||||
box-shadow: 0 0 0 1px rgb(71 85 105) inset !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .el-input__wrapper,
|
||||
html[data-theme='dark'] .oper-log-card .el-select__wrapper,
|
||||
html[data-theme='dark'] .oper-log-card .el-textarea__wrapper,
|
||||
html[data-theme='dark'] .oper-log-card .el-input-group__prepend,
|
||||
html[data-theme='dark'] .oper-log-card .el-input-group__append {
|
||||
--el-fill-color-blank: rgb(20, 20, 20) !important;
|
||||
--el-bg-color: rgb(20, 20, 20) !important;
|
||||
background: rgb(20, 20, 20) !important;
|
||||
box-shadow: 0 0 0 1px rgb(71 85 105) inset !important;
|
||||
border-color: rgb(71 85 105) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .el-input__inner,
|
||||
html[data-theme='dark'] .oper-log-card .el-textarea__inner,
|
||||
html[data-theme='dark'] .oper-log-card .el-select__selected-item,
|
||||
html[data-theme='dark'] .oper-log-card .el-select__placeholder,
|
||||
html[data-theme='dark'] .oper-log-card .el-input__inner::placeholder,
|
||||
html[data-theme='dark'] .oper-log-card .el-textarea__inner::placeholder {
|
||||
background: transparent !important;
|
||||
color: rgb(226 232 240) !important;
|
||||
-webkit-text-fill-color: rgb(226 232 240) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .el-input.is-disabled .el-input__wrapper,
|
||||
html[data-theme='dark'] .oper-log-card .el-select.is-disabled .el-select__wrapper {
|
||||
background: rgb(30 41 59) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .el-input__suffix,
|
||||
html[data-theme='dark'] .oper-log-card .el-input__prefix,
|
||||
html[data-theme='dark'] .oper-log-card .el-input__icon,
|
||||
html[data-theme='dark'] .oper-log-card .el-select__caret,
|
||||
html[data-theme='dark'] .oper-log-card .el-input__clear {
|
||||
color: rgb(148 163 184) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .query-form__actions .el-button {
|
||||
--el-button-bg-color: rgb(30 41 59) !important;
|
||||
--el-button-border-color: rgb(71 85 105) !important;
|
||||
--el-button-text-color: rgb(226 232 240) !important;
|
||||
--el-button-hover-bg-color: rgb(37 99 235 / 22%) !important;
|
||||
--el-button-hover-border-color: rgb(96 165 250) !important;
|
||||
--el-button-hover-text-color: rgb(241 245 249) !important;
|
||||
--el-button-active-bg-color: rgb(37 99 235 / 28%) !important;
|
||||
--el-button-active-border-color: rgb(96 165 250) !important;
|
||||
--el-button-active-text-color: rgb(241 245 249) !important;
|
||||
background: rgb(30 41 59) !important;
|
||||
border-color: rgb(71 85 105) !important;
|
||||
color: rgb(226 232 240) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .query-form__actions .el-button:hover,
|
||||
html[data-theme='dark'] .oper-log-card .query-form__actions .el-button:focus {
|
||||
background: rgb(37 99 235 / 22%) !important;
|
||||
border-color: rgb(96 165 250) !important;
|
||||
color: rgb(241 245 249) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .query-form__actions .el-button--primary {
|
||||
--el-button-bg-color: rgb(37 99 235) !important;
|
||||
--el-button-border-color: rgb(59 130 246) !important;
|
||||
--el-button-text-color: rgb(248 250 252) !important;
|
||||
--el-button-hover-bg-color: rgb(59 130 246) !important;
|
||||
--el-button-hover-border-color: rgb(96 165 250) !important;
|
||||
--el-button-hover-text-color: rgb(248 250 252) !important;
|
||||
background: rgb(37 99 235) !important;
|
||||
border-color: rgb(59 130 246) !important;
|
||||
color: rgb(248 250 252) !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .oper-log-card .query-form__actions .el-button--primary:hover,
|
||||
html[data-theme='dark'] .oper-log-card .query-form__actions .el-button--primary:focus {
|
||||
background: rgb(59 130 246) !important;
|
||||
border-color: rgb(96 165 250) !important;
|
||||
color: rgb(248 250 252) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.oper-log-card {
|
||||
.query-form {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
||||
&__actions {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.oper-log-card {
|
||||
.query-form {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
grid-column: auto;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-panel {
|
||||
justify-content: flex-start;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,6 @@
|
||||
<div class="card-title">
|
||||
<span>快捷登录</span>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<el-button
|
||||
class="quick-login-nav quick-login-nav--left"
|
||||
@@ -103,8 +102,8 @@
|
||||
},
|
||||
]);
|
||||
|
||||
const itemWidth = 104;
|
||||
const gapWidth = 2;
|
||||
const itemWidth = 136;
|
||||
const gapWidth = 8;
|
||||
const stepWidth = itemWidth + gapWidth;
|
||||
const visibleCount = ref(1);
|
||||
const currentIndex = ref(0);
|
||||
@@ -194,12 +193,16 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
@@ -211,12 +214,12 @@
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 6px;
|
||||
padding: 8px 12px 12px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 2px;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -240,7 +243,7 @@
|
||||
|
||||
.quick-login-track {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
gap: 8px;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
@@ -249,19 +252,19 @@
|
||||
}
|
||||
|
||||
.quick-login-item {
|
||||
flex: 0 0 104px;
|
||||
width: 104px;
|
||||
flex: 0 0 136px;
|
||||
width: 136px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
padding: 4px 4px 3px;
|
||||
padding: 8px;
|
||||
border: 1px solid rgb(226 232 240);
|
||||
border-radius: 10px;
|
||||
background: rgb(248 250 252);
|
||||
box-shadow: 0 8px 22px rgb(148 163 184 / 14%);
|
||||
background: rgb(255, 255, 255);
|
||||
box-shadow: 0 8px 24px rgb(148 163 184 / 14%);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
@@ -271,7 +274,7 @@
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(147 197 253);
|
||||
box-shadow: 0 12px 28px rgb(96 165 250 / 18%);
|
||||
box-shadow: 0 12px 28px rgb(96 165 250 / 20%);
|
||||
}
|
||||
|
||||
&__image-wrap {
|
||||
@@ -282,13 +285,15 @@
|
||||
width: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@@ -296,14 +301,14 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
min-height: 26px;
|
||||
min-height: 28px;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
padding-top: 2px;
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
color: rgb(51 65 85);
|
||||
font-size: 11px;
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -311,6 +316,8 @@
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .quick-login-card {
|
||||
background: rgb(20, 20, 20);
|
||||
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
@@ -323,7 +330,7 @@
|
||||
|
||||
&:hover {
|
||||
border-color: rgb(96 165 250);
|
||||
box-shadow: 0 14px 30px rgb(37 99 235 / 20%);
|
||||
box-shadow: 0 14px 32px rgb(37 99 235 / 22%);
|
||||
}
|
||||
|
||||
&__name {
|
||||
@@ -336,12 +343,12 @@
|
||||
@media (max-width: 768px) {
|
||||
.quick-login-card {
|
||||
.card-content {
|
||||
padding: 8px;
|
||||
padding: 8px 12px 12px;
|
||||
}
|
||||
|
||||
.quick-login-item {
|
||||
flex-basis: 100px;
|
||||
width: 100px;
|
||||
flex-basis: 120px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.quick-login-nav {
|
||||
|
||||
@@ -262,12 +262,16 @@
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: rgb(255, 255, 255);
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 37px;
|
||||
padding: 8px 16px;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
@@ -330,7 +334,7 @@
|
||||
.el-table {
|
||||
width: 100%;
|
||||
--el-table-border-color: transparent;
|
||||
--el-table-header-bg-color: rgb(248, 250, 252);
|
||||
--el-table-header-bg-color: rgb(255, 255, 255);
|
||||
--el-table-tr-bg-color: transparent;
|
||||
--el-table-row-hover-bg-color: rgb(241 245 249);
|
||||
--el-table-text-color: rgb(71 85 105);
|
||||
@@ -352,7 +356,7 @@
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
background: rgb(248, 250, 252);
|
||||
background: rgb(255, 255, 255);
|
||||
}
|
||||
|
||||
td.el-table__cell,
|
||||
@@ -419,14 +423,14 @@
|
||||
}
|
||||
|
||||
&__divider {
|
||||
margin: 16px 0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
&__content-panel,
|
||||
&__form-panel {
|
||||
padding: 2px;
|
||||
border-radius: 8px;
|
||||
background: rgb(248 252 255);
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -441,8 +445,8 @@
|
||||
min-height: 36px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 12px;
|
||||
border-radius: 6px;
|
||||
background: rgb(239 246 255);
|
||||
border-radius: 10px;
|
||||
background: rgb(255, 255, 255);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: rgb(51 65 85);
|
||||
@@ -454,7 +458,7 @@
|
||||
max-height: 320px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid rgb(191 219 254);
|
||||
border-radius: 6px;
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255);
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
@@ -499,7 +503,7 @@
|
||||
&__textarea :deep(.el-textarea__inner) {
|
||||
min-height: 140px !important;
|
||||
padding: 14px 16px;
|
||||
border-radius: 6px;
|
||||
border-radius: 10px;
|
||||
border-color: rgb(191 219 254);
|
||||
background: rgb(255 255 255);
|
||||
color: rgb(51 65 85);
|
||||
@@ -509,7 +513,7 @@
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 6px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgb(226 232 240);
|
||||
}
|
||||
|
||||
@@ -535,18 +539,18 @@
|
||||
|
||||
.el-dialog__header {
|
||||
margin-right: 0;
|
||||
padding: 12px 12px 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgb(226 232 240) !important;
|
||||
background: rgb(255 255 255) !important;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
padding: 2px;
|
||||
padding: 4px 16px 16px;
|
||||
background: rgb(255 255 255) !important;
|
||||
}
|
||||
|
||||
.el-dialog__footer {
|
||||
padding: 0 8px 4px;
|
||||
padding: 0 16px 16px;
|
||||
background: rgb(255 255 255) !important;
|
||||
}
|
||||
|
||||
@@ -564,6 +568,8 @@
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .notice-card {
|
||||
background: rgb(20, 20, 20);
|
||||
|
||||
.card-title {
|
||||
color: rgb(203 213 225);
|
||||
border-bottom-color: rgb(51 65 85);
|
||||
|
||||
@@ -19,9 +19,13 @@
|
||||
<section class="analysis-panel">
|
||||
<QuickLogin />
|
||||
</section>
|
||||
<section class="analysis-panel">右上-2</section>
|
||||
<section class="analysis-panel">
|
||||
<BizApps />
|
||||
</section>
|
||||
</div>
|
||||
<section class="analysis-panel">右下</section>
|
||||
<section class="analysis-panel">
|
||||
<ProjectInfo />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,10 +34,12 @@
|
||||
</template>
|
||||
<script lang="ts" setup name="Analysis">
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import BizApps from './components/BizApps.vue'
|
||||
import HostInfo from './components/HostInfo.vue';
|
||||
import TodoInfo from './components/TodoInfo.vue';
|
||||
import NoticeInfo from './components/NoticeInfo.vue';
|
||||
import QuickLogin from './components/QuickLogin.vue';
|
||||
import ProjectInfo from './components/ProjectInfo.vue'
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
@@ -44,6 +44,12 @@
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('操作时间'),
|
||||
field: 'dateRange',
|
||||
component: 'RangePicker',
|
||||
componentProps: {},
|
||||
},
|
||||
{
|
||||
label: t('日志类型'),
|
||||
field: 'logType',
|
||||
@@ -89,17 +95,6 @@
|
||||
field: 'bizType',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('业务主键'),
|
||||
field: 'bizKey',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('操作时间'),
|
||||
field: 'dateRange',
|
||||
component: 'RangePicker',
|
||||
componentProps: {},
|
||||
},
|
||||
],
|
||||
fieldMapToTime: [['dateRange', ['createDate_gte', 'createDate_lte']]],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user