修改
This commit is contained in:
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="register"
|
||||
title="详细信息"
|
||||
@ok="handleSubmit()"
|
||||
:showFooter="true"
|
||||
width="60%"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<div class="detail-container">
|
||||
<div class="detail-title">{{ NoticeList?.title || '无标题' }}</div>
|
||||
<div class="detail-info">
|
||||
<span class="info-item">时间：{{ NoticeList?.createTime || '-' }}</span>
|
||||
<span class="info-item">类型：{{ getTypeText(NoticeList?.type) }}</span>
|
||||
</div>
|
||||
<!-- 优化后的内容展示区域 -->
|
||||
<div class="detail-content">
|
||||
<pre class="db-content">{{ NoticeList?.description || '无内容' }}</pre>
|
||||
</div>
|
||||
<div v-if="NoticeList?.type === '3'" class="todo-opinion">
|
||||
<div class="opinion-card card">
|
||||
<div class="card-header">
|
||||
<span class="label block-label">待办意见</span>
|
||||
<span class="required-mark">*</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<textarea
|
||||
v-model="TodoValue"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入处理意见"
|
||||
class="opinion-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
|
||||
import { bizListItemSflow, BizListItem } from '@jeesite/biz/api/biz/listItem';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal },
|
||||
emits: ['modalClose'],
|
||||
setup(props, { emit }) {
|
||||
|
||||
const TodoValue = ref();
|
||||
const NoticeList = ref();
|
||||
|
||||
const { createMessage } = useMessage();
|
||||
// 模态框注册
|
||||
const [register, { closeModal }] = useModalInner(async (data: any) => {
|
||||
if (!data) return;
|
||||
NoticeList.value = Array.isArray(data) ? data[0] : data;
|
||||
});
|
||||
|
||||
const getTypeText = (type: string) => {
|
||||
switch (type) {
|
||||
case '1': return '通知';
|
||||
case '2': return '消息';
|
||||
case '3': return '待办';
|
||||
default: return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
async function handleSubmit() {
|
||||
if (NoticeList.value?.type === '3' && !TodoValue.value?.trim()) {
|
||||
createMessage.warning('请输入处理意见');
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
id: NoticeList.value?.id ?? '',
|
||||
extra: TodoValue.value ?? {},
|
||||
readFlag: true,
|
||||
};
|
||||
try {
|
||||
const res = await bizListItemSflow(params);
|
||||
createMessage.success(res.message || '提交成功');
|
||||
closeModal();
|
||||
handleCancel();
|
||||
} catch (error: any) {
|
||||
console.error('提交失败：', error);
|
||||
createMessage.error('提交失败，请重试');
|
||||
}
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('modalClose');
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
closeModal,
|
||||
NoticeList,
|
||||
getTypeText,
|
||||
TodoValue,
|
||||
handleSubmit,
|
||||
handleCancel,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全局盒模型重置 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 主容器样式 - 淡蓝色系优化 */
|
||||
.detail-container {
|
||||
background-color: #f0f8ff; /* 统一淡蓝色背景 */
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
min-height: 200px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 标题样式 - 优化分隔线和间距 */
|
||||
.detail-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
color: #1f2937;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #d1e7ff; /* 淡蓝色分隔线 */
|
||||
}
|
||||
|
||||
/* 时间和类型行样式 - 紧凑化+优化背景 */
|
||||
.detail-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
color: #4b5563;
|
||||
font-size: 13px;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
background-color: #ffffff; /* 白色背景更清爽 */
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #d1e7ff; /* 淡蓝色边框 */
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 内容展示区域 - 优化样式和滚动 */
|
||||
.detail-content {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #374151;
|
||||
margin-bottom: 20px;
|
||||
padding: 14px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #d1e7ff;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
/* 数据库格式展示样式 - 优化字体和间距 */
|
||||
.db-content {
|
||||
margin: 0;
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
white-space: pre-wrap; /* 保留换行和空格 */
|
||||
word-break: break-all; /* 防止长文本溢出 */
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 待办意见容器 */
|
||||
.todo-opinion {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 通用卡片样式 - 统一风格 */
|
||||
.card {
|
||||
border: 1px solid #d1e7ff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
/* 卡片头部 */
|
||||
.card-header {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #e8f4ff;
|
||||
background: #f8fbff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.block-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.required-mark {
|
||||
color: #f53f3f;
|
||||
font-size: 14px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 卡片内容区 */
|
||||
.card-body {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
/* 待办意见输入框 - 优化样式 */
|
||||
.opinion-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d1e7ff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
transition: all 0.2s;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.opinion-input:focus {
|
||||
outline: none;
|
||||
border-color: #4096ff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 滚动条优化 */
|
||||
.detail-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-track {
|
||||
background: #f8fbff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-thumb {
|
||||
background: #d1e7ff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.detail-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #4096ff;
|
||||
}
|
||||
</style>
|
||||
@@ -12,30 +12,32 @@
|
||||
{{ item.name }}
|
||||
<span v-if="item.list.length !== 0">({{ item.list.length }})</span>
|
||||
</template>
|
||||
<!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
|
||||
<NoticeList :list="item.list" v-if="item.key === '3'" @title-click="onNoticeClick" />
|
||||
<NoticeList :list="item.list" v-else />
|
||||
<NoticeList :list="item.list" v-if="item.list.length > 0" @click="openModal(true, item.list)" />
|
||||
</TabPane>
|
||||
</template>
|
||||
</Tabs>
|
||||
</template>
|
||||
</Popover>
|
||||
</div>
|
||||
<Modal @register="register" @modalClose="getDataList()" />
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, ref } from 'vue';
|
||||
import { Popover, Tabs, Badge } from 'ant-design-vue';
|
||||
import { BellOutlined } from '@ant-design/icons-vue';
|
||||
import NoticeList from './NoticeList.vue';
|
||||
import { useModal } from '@jeesite/core/components/Modal';
|
||||
import { useDesign } from '@jeesite/core/hooks/web/useDesign';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { tabListDataAll, bizListItemSflow, TabItem, BizListItem } from '@jeesite/biz/api/biz/listItem';
|
||||
import Modal from './NoticeInfo.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
|
||||
components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList, Modal },
|
||||
setup() {
|
||||
const [register, { openModal }] = useModal();
|
||||
|
||||
const { prefixCls } = useDesign('header-notify');
|
||||
const { createMessage } = useMessage();
|
||||
const listData = ref<TabItem[]>([]);
|
||||
|
||||
const getDataList = async () => {
|
||||
@@ -47,19 +49,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
const count = computed(() => {
|
||||
const count = computed(() => {
|
||||
let count = 0;
|
||||
for (let i = 0; i < listData.value.length; i++) {
|
||||
count += listData.value[i].list.length;
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
async function onNoticeClick(record: BizListItem) {
|
||||
const res = await bizListItemSflow(record);
|
||||
createMessage.success(res.message);
|
||||
getDataList()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
@@ -69,8 +65,10 @@
|
||||
prefixCls,
|
||||
listData,
|
||||
count,
|
||||
onNoticeClick,
|
||||
register,
|
||||
openModal,
|
||||
numberStyle: {},
|
||||
getDataList,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,114 +1,8 @@
|
||||
<template>
|
||||
<PageWrapper title="关于">
|
||||
<template #headerContent>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="flex-1">
|
||||
<a href="https://jeesite.com" target="_blank">JeeSite</a>
|
||||
快速开发平台，不仅仅是一个后台开发框架，它是一个企业级快速开发解决方案，有平台来封装技术细节，
|
||||
让开发者更专注业务，降低软件的开发难度。平台基于经典组合 Spring Boot、Apache MyBatis，
|
||||
前端采用：Vue3、Vite、Monorepo、Ant-Design-Vue、TypeScript、
|
||||
<a href="https://github.com/anncwb/vue-vben-admin" target="_blank">Vue Vben Admin</a>，
|
||||
最先进的技术栈，让初学者能够更快的入门并投入到团队开发中去。
|
||||
提供在线代码生成功能，包括模块如：组织机构、角色用户、菜单及按钮授权、数据权限、系统参数、内容管理、工作流等。
|
||||
众多账号安全设置，密码策略；文件在线预览；消息推送；多元化第三方登录；在线定时任务配置；支持集群，支持SAAS；
|
||||
支持多数据源；支持读写分离、分库分表；支持 Spring Cloud 分布式微服务应用架构。
|
||||
强大的组件封装，数据驱动视图。为微小中大型项目的开发，提供现成的开箱解决方案及丰富的示例。
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<Description @register="infoRegister" class="enter-y" />
|
||||
<Description @register="register" class="enter-y my-4" />
|
||||
<Description @register="registerDev" class="enter-y" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup name="AboutPage">
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import { Description, DescItem, useDescription } from '@jeesite/core/components/Description';
|
||||
|
||||
const { pkg, lastBuildTime } = __APP_INFO__;
|
||||
|
||||
const { dependencies, devDependencies, version } = pkg;
|
||||
|
||||
const schema: DescItem[] = [];
|
||||
const devSchema: DescItem[] = [];
|
||||
|
||||
const commonTagRender = (color: string) => (curVal) => h(Tag, { color }, () => curVal);
|
||||
const commonLinkRender = (text: string) => (href) => h('a', { href, target: '_blank' }, text);
|
||||
|
||||
const infoSchema: DescItem[] = [
|
||||
{
|
||||
label: '版本',
|
||||
field: 'version',
|
||||
render: commonTagRender('blue'),
|
||||
},
|
||||
{
|
||||
label: '最后编译时间',
|
||||
field: 'lastBuildTime',
|
||||
render: commonTagRender('blue'),
|
||||
},
|
||||
{
|
||||
label: '文档地址',
|
||||
field: 'docs',
|
||||
render: commonLinkRender('http://docs.jeesite.com'),
|
||||
},
|
||||
{
|
||||
label: '官方网站',
|
||||
field: 'website',
|
||||
render: commonLinkRender('https://jeesite.com'),
|
||||
},
|
||||
{
|
||||
label: '下载地址',
|
||||
field: 'download',
|
||||
render: commonLinkRender('https://gitee.com/thinkgem'),
|
||||
},
|
||||
{
|
||||
label: '联系我',
|
||||
field: 'linkers',
|
||||
render: commonLinkRender('http://s.jeesite.com'),
|
||||
},
|
||||
];
|
||||
|
||||
const infoData = {
|
||||
version,
|
||||
lastBuildTime,
|
||||
docs: 'http://docs.jeesite.com',
|
||||
website: 'https://jeesite.com',
|
||||
download: 'https://gitee.com/thinkgem',
|
||||
linkers: 'http://s.jeesite.com',
|
||||
};
|
||||
|
||||
const [infoRegister] = useDescription({
|
||||
title: '项目信息',
|
||||
data: infoData,
|
||||
schema: infoSchema,
|
||||
column: 2,
|
||||
});
|
||||
|
||||
let register: any;
|
||||
if (dependencies) {
|
||||
Object.keys(dependencies).forEach((key) => {
|
||||
schema.push({ field: key, label: key });
|
||||
});
|
||||
register = useDescription({
|
||||
title: '生产环境依赖',
|
||||
data: dependencies,
|
||||
schema: schema,
|
||||
column: 3,
|
||||
})[0];
|
||||
}
|
||||
|
||||
let registerDev: any;
|
||||
if (devDependencies) {
|
||||
Object.keys(devDependencies).forEach((key) => {
|
||||
devSchema.push({ field: key, label: key });
|
||||
});
|
||||
registerDev = useDescription({
|
||||
title: '开发环境依赖',
|
||||
data: devDependencies,
|
||||
schema: devSchema,
|
||||
column: 3,
|
||||
})[0];
|
||||
}
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,156 +0,0 @@
|
||||
interface GroupItem {
|
||||
title: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
desc: string;
|
||||
date: string;
|
||||
group: string;
|
||||
}
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface DynamicInfoItem {
|
||||
avatar: string;
|
||||
name: string;
|
||||
date: string;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
export const navItems: NavItem[] = [
|
||||
{
|
||||
title: '首页',
|
||||
icon: 'i-ion:home-outline',
|
||||
color: '#1fdaca',
|
||||
},
|
||||
{
|
||||
title: '仪表盘',
|
||||
icon: 'i-ion:grid-outline',
|
||||
color: '#bf0c2c',
|
||||
},
|
||||
{
|
||||
title: '组件',
|
||||
icon: 'i-ion:layers-outline',
|
||||
color: '#e18525',
|
||||
},
|
||||
{
|
||||
title: '系统管理',
|
||||
icon: 'i-ion:settings-outline',
|
||||
color: '#3fb27f',
|
||||
},
|
||||
{
|
||||
title: '权限管理',
|
||||
icon: 'i-ant-design:key-outlined',
|
||||
color: '#4daf1bc9',
|
||||
},
|
||||
{
|
||||
title: '图表',
|
||||
icon: 'i-ion:bar-chart-outline',
|
||||
color: '#00d8ff',
|
||||
},
|
||||
];
|
||||
|
||||
export const dynamicInfoItems: DynamicInfoItem[] = [
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-4.svg',
|
||||
name: 'ThinkGem',
|
||||
date: '刚刚',
|
||||
desc: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
|
||||
},
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-2.svg',
|
||||
name: '果汁',
|
||||
date: '1个小时前',
|
||||
desc: `关注了 <a>JeeSite</a> `,
|
||||
},
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-3.svg',
|
||||
name: 'JeeSite',
|
||||
date: '1天前',
|
||||
desc: `发布了 <a>个人动态</a> `,
|
||||
},
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-5.svg',
|
||||
name: 'Vben',
|
||||
date: '2天前',
|
||||
desc: `发表文章 <a>如何编写一个Vite插件</a> `,
|
||||
},
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-4.svg',
|
||||
name: 'ThinkGem',
|
||||
date: '3天前',
|
||||
desc: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
|
||||
},
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-6.svg',
|
||||
name: 'JeeSite',
|
||||
date: '1周前',
|
||||
desc: `关闭了问题 <a>如何运行项目</a> `,
|
||||
},
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-1.svg',
|
||||
name: '彩虹',
|
||||
date: '1周前',
|
||||
desc: `发布了 <a>个人动态</a> `,
|
||||
},
|
||||
{
|
||||
avatar: 'icons/dynamic-avatar-1.svg',
|
||||
name: '彩虹',
|
||||
date: '2021-09-01 20:00',
|
||||
desc: `推送了代码到 <a>Gitee</a>`,
|
||||
},
|
||||
];
|
||||
|
||||
export const groupItems: GroupItem[] = [
|
||||
{
|
||||
title: 'Gitee',
|
||||
icon: 'i-simple-icons:gitee',
|
||||
color: '#ce2323',
|
||||
desc: '不要等待机会，而要创造机会。',
|
||||
group: '开源组',
|
||||
date: '2021-09-01',
|
||||
},
|
||||
{
|
||||
title: 'Vue',
|
||||
icon: 'i-ion:logo-vue',
|
||||
color: '#3fb27f',
|
||||
desc: '现在的你决定将来的你。',
|
||||
group: '前端组',
|
||||
date: '2021-09-01',
|
||||
},
|
||||
{
|
||||
title: 'Html5',
|
||||
icon: 'i-ion:logo-html5',
|
||||
color: '#e18525',
|
||||
desc: '没有什么才能比努力更重要。',
|
||||
group: '上班摸鱼',
|
||||
date: '2021-09-01',
|
||||
},
|
||||
{
|
||||
title: 'Java',
|
||||
icon: 'i-logos:java',
|
||||
color: '#bf0c2c',
|
||||
desc: '热情和欲望可以突破一切难关。',
|
||||
group: '算法组',
|
||||
date: '2021-09-01',
|
||||
},
|
||||
{
|
||||
title: 'Spring',
|
||||
icon: 'i-bx:bxl-spring-boot',
|
||||
color: '#00d8ff',
|
||||
desc: '健康的身体是实目标的基石。',
|
||||
group: '技术牛',
|
||||
date: '2021-09-01',
|
||||
},
|
||||
{
|
||||
title: 'JeeSite',
|
||||
icon: 'i-ion:logo-javascript',
|
||||
color: '#4daf1bc9',
|
||||
desc: '路是走出来的，而不是空想出来的。',
|
||||
group: '架构组',
|
||||
date: '2021-09-01',
|
||||
},
|
||||
];
|
||||
@@ -1,56 +1,320 @@
|
||||
<template>
|
||||
<Card title="最新动态" v-bind="$attrs" class="dynamic-info-card">
|
||||
<Card title="运行信息" v-bind="$attrs">
|
||||
<template #extra>
|
||||
<a-button type="link" size="small">更多</a-button>
|
||||
<a-button type="link" size="small" @click="goToMorePage()">更多</a-button>
|
||||
</template>
|
||||
<!-- 设置固定高度和滚动条 -->
|
||||
<div class="dynamic-list-container">
|
||||
<List item-layout="horizontal" :data-source="dynamicInfoItems">
|
||||
<template #renderItem="{ item }">
|
||||
<ListItem>
|
||||
<ListItemMeta>
|
||||
<template #description>
|
||||
{{ item.date }}
|
||||
</template>
|
||||
<!-- eslint-disable-next-line -->
|
||||
<template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
|
||||
<template #avatar>
|
||||
<Icon :icon="item.avatar" :size="30" />
|
||||
</template>
|
||||
</ListItemMeta>
|
||||
</ListItem>
|
||||
<div class="card-grid">
|
||||
<template v-for="item in listData" :key="item.id || item.ip">
|
||||
<div class="server-card">
|
||||
<div class="ip-info">
|
||||
<div class="info-item ip-row">
|
||||
<span><a-button type="link" size="small" @click="openModal(true, item)">{{ item.sysHostname || '未知IP' }}</a-button></span>
|
||||
<span class="status-tag" :class="item.ustatus === '1' ? 'status-running' : 'status-offline'">
|
||||
{{ item.ustatus === '1' ? '运行中' : '已离线' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider ip-divider"></div>
|
||||
<div class="cpu-info">
|
||||
<!-- CPU使用率 -->
|
||||
<div class="cpu-label">
|
||||
<span>CPU使用率</span>
|
||||
<span class="cpu-value" :class="getUsageClass(item.cpuUsage || 0)">
|
||||
{{ (item.cpuUsage || 0).toFixed(2) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="cpu-progress-bar">
|
||||
<div
|
||||
class="cpu-progress"
|
||||
:style="{ width: `${(item.cpuUsage || 0)}%` }"
|
||||
:class="getProgressClass(item.cpuUsage || 0)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- 内存使用率 -->
|
||||
<div class="cpu-label">
|
||||
<span>内存使用率</span>
|
||||
<span class="cpu-value" :class="getUsageClass(item.memoryUsage || 0)">
|
||||
{{ (item.memoryUsage || 0).toFixed(2) }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="cpu-progress-bar">
|
||||
<div
|
||||
class="cpu-progress"
|
||||
:style="{ width: `${(item.memoryUsage || 0)}%` }"
|
||||
:class="getProgressClass(item.memoryUsage || 0)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="base-info">
|
||||
<div class="info-row">
|
||||
<div class="info-item">
|
||||
<Icon type="icon-time" class="info-icon" />
|
||||
<span>运行时长: {{ item.uptime }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<Icon type="icon-memory" class="info-icon" />
|
||||
<span>内存总量: {{ item.memoryTotal || '未知' }}GB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</List>
|
||||
|
||||
<div v-if="!listData || listData.length === 0" class="empty-state">
|
||||
<Icon type="icon-empty" size="large" />
|
||||
<p>暂无服务器运行信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Modal @register="register" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Card, List } from 'ant-design-vue';
|
||||
import { dynamicInfoItems } from './Data';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { useModal } from '@jeesite/core/components/Modal';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { BizServerInfo, bizServerInfoListAll } from '@jeesite/biz/api/biz/serverInfo';
|
||||
import Modal from './info/ServerInfo.vue';
|
||||
|
||||
const ListItem = List.Item;
|
||||
const ListItemMeta = List.Item.Meta;
|
||||
export default defineComponent({
|
||||
components: { Card, Icon, Modal },
|
||||
setup() {
|
||||
|
||||
const [register, { openModal }] = useModal();
|
||||
// 服务器数据列表
|
||||
const listData = ref<BizServerInfo[]>([]);
|
||||
const router = useRouter();
|
||||
|
||||
// 获取数据列表
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const params = { projectStatus: '2' };
|
||||
const result = await bizServerInfoListAll(params);
|
||||
listData.value = result || [];
|
||||
} catch (error) {
|
||||
console.error('获取服务器信息失败:', error);
|
||||
listData.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到更多页面
|
||||
const goToMorePage = () => {
|
||||
router.push('/biz/serverInfo/list');
|
||||
};
|
||||
|
||||
// 根据使用率获取样式类
|
||||
const getUsageClass = (usage: number) => {
|
||||
if (usage >= 80) return 'usage-danger';
|
||||
if (usage >= 60) return 'usage-warning';
|
||||
return 'usage-normal';
|
||||
};
|
||||
|
||||
// 根据使用率获取进度条样式类
|
||||
const getProgressClass = (usage: number) => {
|
||||
if (usage >= 80) return 'progress-danger';
|
||||
if (usage >= 60) return 'progress-warning';
|
||||
return 'progress-normal';
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDataList();
|
||||
});
|
||||
|
||||
return {
|
||||
listData,
|
||||
register,
|
||||
openModal,
|
||||
goToMorePage,
|
||||
getUsageClass,
|
||||
getProgressClass,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 卡片容器样式 */
|
||||
.dynamic-info-card {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
/* 列表滚动容器 */
|
||||
.dynamic-list-container {
|
||||
/* 设置固定高度，可根据需求调整 */
|
||||
max-height: 200px;
|
||||
/* 超出部分显示滚动条 */
|
||||
height: 30vh; /* 减去标题栏高度 */
|
||||
overflow-y: auto;
|
||||
/* 内边距，美化显示 */
|
||||
padding-right: 8px;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式（可选，美化滚动条） */
|
||||
/* 网格布局：每行3列 */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr); /* 固定3列 */
|
||||
gap: 16px; /* 卡片间距 */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 服务器卡片样式 */
|
||||
.server-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid #f0f0f0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
min-height: 200px; /* 卡片最小高度 */
|
||||
}
|
||||
|
||||
/* IP信息区域 */
|
||||
.ip-info {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* IP行布局 - 新增 */
|
||||
.ip-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 运行状态标签样式 - 新增 */
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 运行中状态 - 绿色 */
|
||||
.status-running {
|
||||
background-color: #f0f9ff;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
/* 已离线状态 - 红色 */
|
||||
.status-offline {
|
||||
background-color: #fff2f0;
|
||||
color: #f5222d;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
/* CPU信息区域 */
|
||||
.cpu-info {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cpu-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 使用率数值颜色 */
|
||||
.cpu-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
/* 正常状态 (0-60%) - 蓝色 */
|
||||
.usage-normal {
|
||||
color: #1890ff; /* 蚂蚁设计主蓝色 */
|
||||
}
|
||||
/* 警告状态 (60-80%) - 黄色 */
|
||||
.usage-warning {
|
||||
color: #faad14; /* 标准警告黄色 */
|
||||
}
|
||||
/* 危险状态 (80%+) - 红色 */
|
||||
.usage-danger {
|
||||
color: #f5222d; /* 危险红色 */
|
||||
}
|
||||
|
||||
/* CPU进度条 */
|
||||
.cpu-progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cpu-progress {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease, background 0.3s ease;
|
||||
}
|
||||
/* 正常进度条 (0-60%) - 蓝色渐变 */
|
||||
.progress-normal {
|
||||
background: linear-gradient(90deg, #1890ff, #40a9ff); /* 蓝色渐变 */
|
||||
}
|
||||
/* 警告进度条 (60-80%) - 黄色渐变 */
|
||||
.progress-warning {
|
||||
background: linear-gradient(90deg, #faad14, #ffc53d); /* 黄色渐变 */
|
||||
}
|
||||
/* 危险进度条 (80%+) - 红色渐变 */
|
||||
.progress-danger {
|
||||
background: linear-gradient(90deg, #f5222d, #ff4d4f); /* 红色渐变 */
|
||||
}
|
||||
|
||||
/* 分隔线 */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #f0f0f0;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
/* IP区域分隔线 */
|
||||
.ip-divider {
|
||||
margin: 8px 0 16px 0;
|
||||
}
|
||||
|
||||
/* 基础信息区域 - 优化布局样式 */
|
||||
.base-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 一行展示多个信息项 */
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
flex: 1; /* 让两个item平分宽度 */
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-right: 8px;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-state {
|
||||
grid-column: 1 / -1; /* 跨所有列 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 */
|
||||
.dynamic-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
@@ -75,18 +339,16 @@
|
||||
scrollbar-color: #d9d9d9 #f5f5f5;
|
||||
}
|
||||
|
||||
/* 列表项间距优化 */
|
||||
:deep(.ant-list-item) {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 992px) {
|
||||
.card-grid {
|
||||
grid-template-columns: repeat(2, 1fr); /* 中等屏幕2列 */
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-list-item:last-child) {
|
||||
border-bottom: none;
|
||||
@media (max-width: 576px) {
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr; /* 小屏幕1列 */
|
||||
}
|
||||
}
|
||||
|
||||
/* 头像和文字对齐优化 */
|
||||
:deep(.ant-list-item-meta-avatar) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,38 +1,42 @@
|
||||
<template>
|
||||
<Card title="项目" v-bind="$attrs">
|
||||
<Card title="项目信息" v-bind="$attrs">
|
||||
<template #extra>
|
||||
<a-button type="link" size="small">更多</a-button>
|
||||
<a-button type="link" size="small" @click="goToMorePage()">更多</a-button>
|
||||
</template>
|
||||
<div class="scroll-container">
|
||||
<template v-for="item in listData" :key="item">
|
||||
<CardGrid class="!w-full rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100">
|
||||
<div class="flex items-center mb-3">
|
||||
<Icon icon="i-ion:layers-outline" color="#00bfff" size="25" />
|
||||
<span class="ml-2 text-lg font-medium text-gray-800">{{ item.projectName }}</span>
|
||||
</div>
|
||||
<div class="text-gray-600 mt-1 mb-4 h-12 flex items-center overflow-auto text-sm pr-2">
|
||||
{{ item.projectDesc }}
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-md p-3 border-b-2 border-blue-200">
|
||||
<div class="text-gray-600 flex justify-between mb-2 text-sm">
|
||||
<span class="flex items-center">
|
||||
<i class="ri-calendar-start-line mr-1 text-blue-400"></i>
|
||||
开始时间: {{ item.startDate }}
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<i class="ri-code-line mr-1 text-blue-400"></i>
|
||||
项目编码: {{ item.projectCode }}
|
||||
<div class="scroll-container" style="overflow-x: hidden;">
|
||||
<template v-for="item in listData" :key="item.projectCode || item">
|
||||
<CardGrid class="!w-full rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200 border border-gray-100 card-grid-fixed-height">
|
||||
<div class="grid-content">
|
||||
<div class="flex items-center mb-2 name-wrapper">
|
||||
<Icon icon="i-ion:layers-outline" color="#00bfff" size="25" />
|
||||
<span class="ml-2 text-lg font-medium text-gray-800 project-name">
|
||||
{{ item.projectName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-gray-600 flex justify-between text-sm">
|
||||
<span class="flex items-center">
|
||||
<i class="ri-calendar-end-line mr-1 text-blue-400"></i>
|
||||
结束时间: {{ item.endDate }}
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<i class="ri-user-line mr-1 text-blue-400"></i>
|
||||
项目经理: {{ item.employeeName }}
|
||||
</span>
|
||||
<div class="project-desc-input-style">
|
||||
{{ item.projectDesc || '-' }}
|
||||
</div>
|
||||
<div class="bg-blue-50 rounded-md p-2 border border-blue-200 mt-1">
|
||||
<div class="text-gray-600 flex justify-between mb-1 text-sm">
|
||||
<span class="flex items-center">
|
||||
<i class="ri-calendar-start-line mr-1 text-blue-400"></i>
|
||||
开始时间: {{ item.startDate || '-' }}
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<i class="ri-code-line mr-1 text-blue-400"></i>
|
||||
项目编码: {{ item.projectCode || '-' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-gray-600 flex justify-between text-sm">
|
||||
<span class="flex items-center">
|
||||
<i class="ri-calendar-end-line mr-1 text-blue-400"></i>
|
||||
结束时间: {{ item.endDate || '-' }}
|
||||
</span>
|
||||
<span class="flex items-center">
|
||||
<i class="ri-user-line mr-1 text-blue-400"></i>
|
||||
项目经理: {{ item.employeeName || '-' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardGrid>
|
||||
@@ -40,64 +44,159 @@
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BizProjectInfo, bizProjectInfoListAll } from '@jeesite/biz/api/biz/projectInfo';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Card, CardGrid: Card.Grid, Icon },
|
||||
setup() {
|
||||
const listData = ref();
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const params = { projectStatus: '2' };
|
||||
const result = await bizProjectInfoListAll(params);
|
||||
listData.value = result || [];
|
||||
} catch (error) {
|
||||
listData.value = []; // 异常时置空列表，显示空状态
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDataList()
|
||||
});
|
||||
|
||||
return {
|
||||
listData,
|
||||
};
|
||||
},
|
||||
import { defineComponent, onMounted, ref } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { BizProjectInfo, bizProjectInfoListAll } from '@jeesite/biz/api/biz/projectInfo';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Card, CardGrid: Card.Grid, Icon },
|
||||
setup() {
|
||||
const listData = ref<BizProjectInfo[]>([]);
|
||||
const router = useRouter();
|
||||
|
||||
const getDataList = async () => {
|
||||
try {
|
||||
const params = { projectStatus: '2' };
|
||||
const result = await bizProjectInfoListAll(params);
|
||||
listData.value = result || [];
|
||||
} catch (error) {
|
||||
console.warn('获取项目列表失败:', error);
|
||||
listData.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const goToMorePage = () => {
|
||||
router.push('/biz/projectInfo/list');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDataList();
|
||||
});
|
||||
|
||||
return {
|
||||
listData,
|
||||
goToMorePage,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 核心：滚动 + 一行3列布局 */
|
||||
/* 外层滚动容器：仅纵向滚动，横向彻底禁止 */
|
||||
.scroll-container {
|
||||
max-height: 30vh; /* 超出高度显示滚动条 */
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 4px;
|
||||
|
||||
/* 关键：网格布局一行3个 */
|
||||
padding-right: 12px;
|
||||
height: 30vh;
|
||||
overflow-y: auto; /* 仅纵向滚动 */
|
||||
overflow-x: hidden !important; /* 强制禁止横向滚动 */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* 强制一行3列 */
|
||||
gap: 16px; /* 卡片间距，可按需调整 */
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
box-sizing: border-box; /* 盒模型：padding不撑宽 */
|
||||
}
|
||||
|
||||
/* 可选：滚动条美化（保留浏览器默认可删除） */
|
||||
/* 卡片容器：锁死宽度，避免溢出 */
|
||||
.card-grid-fixed-height {
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box; /* 内边距不撑宽 */
|
||||
width: 100% !important; /* 强制占满网格列宽 */
|
||||
overflow: hidden; /* 卡片内所有内容禁止溢出 */
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 名称父容器：彻底锁死宽度，防溢出 */
|
||||
.name-wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden !important; /* 阻断横向溢出 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 项目名称：单行省略核心样式（优先级拉满） */
|
||||
.project-name {
|
||||
flex: 1; /* 占满剩余宽度 */
|
||||
white-space: nowrap !important; /* 强制单行 */
|
||||
overflow: hidden !important; /* 隐藏超出 */
|
||||
text-overflow: ellipsis !important; /* 省略号 */
|
||||
max-width: calc(100% - 35px) !important; /* 预留图标+间距（25+8+2），避免重叠 */
|
||||
display: inline-block !important; /* 确保省略样式生效 */
|
||||
}
|
||||
|
||||
.project-desc-input-style {
|
||||
color: #666;
|
||||
font-size: 0.875rem;
|
||||
height: 12vh;
|
||||
max-height: 80px;
|
||||
line-height: 1.4;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 0.375rem;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
margin: 0.25rem 0 0.25rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 空描述文字样式区分 */
|
||||
.project-desc-input-style .text-gray-400 {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 统一滚动条样式（仅纵向，横向无） */
|
||||
.scroll-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
width: 6px; /* 仅纵向滚动条宽度 */
|
||||
height: 0; /* 横向滚动条高度为0，彻底隐藏 */
|
||||
}
|
||||
.scroll-container::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.scroll-container::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.project-desc-input-style::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.project-desc-input-style::-webkit-scrollbar-thumb {
|
||||
background: #d9d9d9;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.project-desc-input-style::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* 适配小屏（可选，如需移动端仍保持3列可删除） */
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.scroll-container {
|
||||
grid-template-columns: repeat(1, 1fr); /* 小屏一行1列 */
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
padding-right: 8px;
|
||||
}
|
||||
.card-grid-fixed-height {
|
||||
height: 240px;
|
||||
}
|
||||
.project-desc-input-style {
|
||||
height: 10vh;
|
||||
}
|
||||
.project-name {
|
||||
max-width: calc(100% - 30px) !important; /* 移动端适配间距 */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<div class="quick-login-container">
|
||||
<!-- 标题区域（保留内置图标） -->
|
||||
<div class="title-bar">
|
||||
<LoginOutlined class="title-icon" />
|
||||
<span class="title-text">应用系统</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索框（保留内置图标） -->
|
||||
<a-input
|
||||
v-model:value="searchKey"
|
||||
@@ -18,38 +12,40 @@
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<!-- 应用卡片滚动容器 -->
|
||||
<div class="app-scroll-container">
|
||||
<div class="app-card-grid">
|
||||
<!-- 应用卡片（图标为图片地址） -->
|
||||
<div
|
||||
v-for="(app, index) in filteredAppList"
|
||||
:key="index"
|
||||
class="app-card"
|
||||
@click="openAppUrl(app.homepageUrl)"
|
||||
>
|
||||
<!-- 图片图标容器 -->
|
||||
<div class="app-icon-wrapper" :style="{ backgroundColor: app.bgColor }">
|
||||
<img
|
||||
:src="app.iconClass"
|
||||
:alt="app.systemName"
|
||||
class="app-icon"
|
||||
@error="handleImgError($event)"
|
||||
/>
|
||||
<!-- 应用卡片滚动容器 - 优化滚动条容器结构 -->
|
||||
<div class="app-scroll-wrapper">
|
||||
<div class="app-scroll-container">
|
||||
<div class="app-card-grid">
|
||||
<!-- 应用卡片（图标为图片地址） -->
|
||||
<div
|
||||
v-for="(app, index) in filteredAppList"
|
||||
:key="index"
|
||||
class="app-card"
|
||||
@click="openAppUrl(app.homepageUrl)"
|
||||
>
|
||||
<!-- 图片图标容器 -->
|
||||
<div class="app-icon-wrapper" :style="{ backgroundColor: app.bgColor }">
|
||||
<img
|
||||
:src="app.iconClass"
|
||||
:alt="app.systemName"
|
||||
class="app-icon"
|
||||
@error="handleImgError($event)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 应用名称 -->
|
||||
<div class="app-name">{{ app.systemName }}</div>
|
||||
<!-- 悬浮遮罩层 -->
|
||||
<div class="app-hover-mask" :style="{ background: app.maskColor }">
|
||||
<span class="hover-text">打开 {{ app.systemName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 应用名称 -->
|
||||
<div class="app-name">{{ app.systemName }}</div>
|
||||
<!-- 悬浮遮罩层 -->
|
||||
<div class="app-hover-mask" :style="{ background: app.maskColor }">
|
||||
<span class="hover-text">打开 {{ app.systemName }}</span>
|
||||
|
||||
<!-- 空状态提示（保留内置图标） -->
|
||||
<div v-if="filteredAppList.length === 0" class="empty-tip">
|
||||
<SearchOutlined class="empty-icon" />
|
||||
<p class="empty-text">未找到匹配的应用</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示（保留内置图标） -->
|
||||
<div v-if="filteredAppList.length === 0" class="empty-tip">
|
||||
<SearchOutlined class="empty-icon" />
|
||||
<p class="empty-text">未找到匹配的应用</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,7 +54,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { Input } from 'ant-design-vue';
|
||||
import { LoginOutlined, SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { SearchOutlined } from '@ant-design/icons-vue';
|
||||
import { BizQuickLogin, bizQuickLoginListAll } from '@jeesite/biz/api/biz/quickLogin';
|
||||
|
||||
const appList = ref<BizQuickLogin[]>([]);
|
||||
@@ -112,35 +108,17 @@ const handleImgError = (e: Event) => {
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
width: auto;
|
||||
height: 75vh;
|
||||
height: 35vh;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 标题区域 */
|
||||
.title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 20px;
|
||||
color: #1890ff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-input {
|
||||
margin-bottom: 24px;
|
||||
flex-shrink: 0; /* 防止搜索框被压缩 */
|
||||
}
|
||||
|
||||
.search-input :deep(.ant-input) {
|
||||
@@ -162,35 +140,63 @@ const handleImgError = (e: Event) => {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 核心：滚动容器 */
|
||||
.app-scroll-container {
|
||||
max-height: 45vh;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
scroll-behavior: smooth;
|
||||
/* 滚动容器外层包装 - 关键优化：容纳滚动条 */
|
||||
.app-scroll-wrapper {
|
||||
flex: 1; /* 占满剩余高度 */
|
||||
border-radius: 8px;
|
||||
overflow: hidden; /* 裁剪滚动条超出部分 */
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
/* 核心：滚动容器 - 优化内边距和滚动条 */
|
||||
.app-scroll-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
/* 关键：内边距让滚动条在容器内，右侧预留滚动条空间 */
|
||||
padding: 0 8px 0 0;
|
||||
scroll-behavior: smooth;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 - 优化样式和位置 */
|
||||
.app-scroll-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
/* 滚动条位置调整 */
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.app-scroll-container::-webkit-scrollbar-track {
|
||||
background: #f1f3f5;
|
||||
background: transparent; /* 透明轨道，避免出现色块 */
|
||||
border-radius: 3px;
|
||||
margin: 4px 0; /* 上下留空，滚动条不贴边 */
|
||||
}
|
||||
|
||||
.app-scroll-container::-webkit-scrollbar-thumb {
|
||||
background: #c9cdd4;
|
||||
background: #e5e6eb;
|
||||
border-radius: 3px;
|
||||
border: 1px solid transparent;
|
||||
background-clip: padding-box; /* 防止滚动条圆角被裁剪 */
|
||||
}
|
||||
|
||||
.app-scroll-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #86909c;
|
||||
background: #c9cdd4;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
/* 兼容Firefox的滚动条样式 */
|
||||
.app-scroll-container {
|
||||
scrollbar-width: thin; /* 细滚动条 */
|
||||
scrollbar-color: #e5e6eb transparent; /* 滚动条颜色和轨道颜色 */
|
||||
}
|
||||
|
||||
/* 卡片网格布局 */
|
||||
.app-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
/* 调整内边距，配合滚动容器 */
|
||||
padding: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
/* 应用卡片 */
|
||||
@@ -201,7 +207,7 @@ const handleImgError = (e: Event) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120px;
|
||||
background: #f0f8ff; /* 淡蓝色（十六进制色值），也可使用 rgb(240, 248, 255) 或 rgba(240, 248, 255, 0.8) 调节透明度 */
|
||||
background: #f0f8ff; /* 淡蓝色（十六进制色值） */
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
@@ -281,7 +287,7 @@ const handleImgError = (e: Event) => {
|
||||
|
||||
/* 空状态样式 */
|
||||
.empty-tip {
|
||||
grid-column: span 2;
|
||||
grid-column: span 4; /* 改为跨4列，居中显示 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -299,4 +305,17 @@ const handleImgError = (e: Event) => {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 1200px) {
|
||||
.app-card-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.app-card-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<Card title="预警信息" v-bind="$attrs">
|
||||
<template #extra>
|
||||
<!-- 状态筛选标签 + 更多按钮 整合到extra插槽 -->
|
||||
<div class="status-filter-container">
|
||||
<div class="status-filter">
|
||||
<span
|
||||
v-for="item in statusOptions"
|
||||
:key="item.value"
|
||||
:class="['status-item', { active: currentStatus === item.value }]"
|
||||
@click="handleStatusChange(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
<a-button type="link" size="small" @click="goToMorePage()">更多</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 预警列表容器：移除边框 + 紧凑布局 + 滚动条 -->
|
||||
<div class="alert-list-container">
|
||||
<!-- 加载状态提示 -->
|
||||
<div v-if="loading" class="empty-tip">
|
||||
加载中...
|
||||
</div>
|
||||
<!-- 空数据提示 -->
|
||||
<div v-else-if="!alertList.length" class="empty-tip">
|
||||
暂无{{ statusOptions.find(item => item.value === currentStatus)?.label }}的预警信息
|
||||
</div>
|
||||
|
||||
<!-- 预警项列表 -->
|
||||
<div v-else class="alert-list">
|
||||
<div
|
||||
v-for="item in alertList"
|
||||
:key="item.id"
|
||||
class="alert-item"
|
||||
>
|
||||
<!-- 预警级别（固定宽度） -->
|
||||
<span
|
||||
class="level-tag"
|
||||
:class="`level-${item.alertLevel}`"
|
||||
>
|
||||
{{ getLevelText(item.alertLevel) }}
|
||||
</span>
|
||||
<!-- 预警触发时间（固定宽度） -->
|
||||
<span class="trigger-time">{{ item.triggerTime }}</span>
|
||||
<!-- 预警类型（固定宽度） -->
|
||||
<span class="alert-type">{{ item.alertType }}</span>
|
||||
<!-- 预警标题 -->
|
||||
<span class="alert-title"> <a-button type="link" size="small" @click="openModal(true, item)">{{ item.alertTitle }}</a-button></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Modal @register="register" @modalClose="fetchAppList('0')" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Card, Button } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useModal } from '@jeesite/core/components/Modal';
|
||||
import { bizWarningAlertListAll, BizWarningAlert } from '@jeesite/biz/api/biz/warningAlert';
|
||||
import Modal from './info/WarningInfo.vue';
|
||||
|
||||
const [register, { openModal }] = useModal();
|
||||
const alertList = ref<BizWarningAlert[]>([]);
|
||||
const loading = ref<boolean>(false); // 新增加载状态
|
||||
const router = useRouter();
|
||||
|
||||
// 状态选项配置
|
||||
const statusOptions = ref([
|
||||
{ value: '0', label: '未处理' },
|
||||
{ value: '1', label: '处理中' },
|
||||
{ value: '2', label: '已解决' },
|
||||
{ value: '3', label: '已忽略' },
|
||||
{ value: '4', label: '已关闭' },
|
||||
]);
|
||||
const currentStatus = ref<string>('0'); // 默认选中未处理
|
||||
|
||||
// 处理状态切换（新增方法）
|
||||
const handleStatusChange = (status: string) => {
|
||||
if (currentStatus.value === status) return; // 避免重复请求
|
||||
currentStatus.value = status;
|
||||
fetchAppList(status); // 切换状态时传递参数
|
||||
};
|
||||
|
||||
// 获取预警列表数据
|
||||
const fetchAppList = async (status: string) => {
|
||||
try {
|
||||
loading.value = true; // 开始加载
|
||||
const params = { alertStatus: status }; // 传递状态参数
|
||||
const result = await bizWarningAlertListAll(params);
|
||||
alertList.value = result || [];
|
||||
} catch (error) {
|
||||
console.error('获取预警列表失败：', error);
|
||||
alertList.value = [];
|
||||
} finally {
|
||||
loading.value = false; // 结束加载
|
||||
}
|
||||
};
|
||||
|
||||
// 跳转到更多页面（优化：携带当前状态参数）
|
||||
const goToMorePage = () => {
|
||||
router.push('/biz/warningAlert/list');
|
||||
};
|
||||
|
||||
// 转换预警级别文本
|
||||
const getLevelText = (level: number | undefined) => {
|
||||
if (!level) return '未知';
|
||||
const levelMap = {
|
||||
1: '紧急',
|
||||
2: '高',
|
||||
3: '中',
|
||||
4: '低',
|
||||
};
|
||||
return levelMap[level as keyof typeof levelMap] || '未知';
|
||||
};
|
||||
|
||||
// 初始化加载默认状态数据
|
||||
onMounted(() => {
|
||||
fetchAppList(currentStatus.value); // 初始化时传递默认状态（0）
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* extra插槽容器：状态标签 + 更多按钮 横向排列 */
|
||||
.status-filter-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 状态筛选栏（非按钮样式） */
|
||||
.status-filter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px; /* 标签间距 */
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 状态项样式（纯文本标签） */
|
||||
.status-item {
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
position: relative;
|
||||
padding-bottom: 2px;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 选中状态样式（下划线 + 高亮色） */
|
||||
.status-item.active {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 选中状态下划线 */
|
||||
.status-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #1890ff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* 悬浮效果 */
|
||||
.status-item:not(.active):hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
/* 列表外层容器：移除边框 + 滚动核心样式 + 极致紧凑 */
|
||||
.alert-list-container {
|
||||
width: 100%;
|
||||
height: 35vh; /* 限制最大高度，超出滚动 */
|
||||
overflow-y: auto; /* 垂直滚动 */
|
||||
overflow-x: hidden; /* 隐藏横向滚动 */
|
||||
padding: 0; /* 移除内边距 */
|
||||
margin: 0; /* 移除外边距 */
|
||||
background: transparent; /* 透明背景，贴合Card */
|
||||
}
|
||||
|
||||
/* 空数据/加载提示 */
|
||||
.empty-tip {
|
||||
padding: 20px 0; /* 缩减空状态内边距，更紧凑 */
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 预警列表 */
|
||||
.alert-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 单个预警项：flex布局 + 紧凑排列（级别→时间→类型→标题） */
|
||||
.alert-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
font-size: 14px;
|
||||
gap: 10px; /* 统一控制元素间基础间距 */
|
||||
}
|
||||
|
||||
/* 最后一项去掉底部边框 */
|
||||
.alert-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 鼠标悬浮高亮 */
|
||||
.alert-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 预警级别标签（固定宽度，不压缩） */
|
||||
.level-tag {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
min-width: 40px;
|
||||
text-align: center;
|
||||
flex-shrink: 0; /* 固定宽度，不被压缩 */
|
||||
}
|
||||
|
||||
/* 级别颜色 */
|
||||
.level-1 { background-color: #f5222d; } /* 紧急 */
|
||||
.level-2 { background-color: #fa8c16; } /* 高 */
|
||||
.level-3 { background-color: #faad14; } /* 中 */
|
||||
.level-4 { background-color: #1890ff; } /* 低 */
|
||||
.level-undefined { background-color: #8c8c8c; } /* 未知 */
|
||||
|
||||
/* 预警触发时间（固定宽度，不压缩） */
|
||||
.trigger-time {
|
||||
width: 120px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0; /* 固定宽度，不被压缩 */
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 预警类型（固定宽度，不压缩） */
|
||||
.alert-type {
|
||||
width: 60px;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0; /* 固定宽度，不被压缩 */
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 预警标题（最后，自适应宽度，超长省略） */
|
||||
.alert-title {
|
||||
width: 155px; /* 固定宽度，可根据需求调整（比如200px/400px） */
|
||||
flex-shrink: 0; /* 关键：禁止宽度被压缩，保证固定宽度生效 */
|
||||
color: #666;
|
||||
white-space: nowrap; /* 强制不换行 */
|
||||
overflow: hidden; /* 隐藏超出宽度的内容 */
|
||||
text-overflow: ellipsis; /* 超出显示省略号 */
|
||||
margin-left: 4px; /* 保留与类型的微小间距 */
|
||||
}
|
||||
|
||||
/* 滚动条样式优化 */
|
||||
.alert-list-container::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.alert-list-container::-webkit-scrollbar-thumb {
|
||||
border-radius: 3px;
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.alert-list-container::-webkit-scrollbar-track {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 小屏幕适配 */
|
||||
@media (max-width: 768px) {
|
||||
.status-filter-container {
|
||||
gap: 8px;
|
||||
}
|
||||
.status-filter {
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.alert-item {
|
||||
padding: 4px 6px;
|
||||
font-size: 12px;
|
||||
gap: 6px;
|
||||
}
|
||||
.level-tag {
|
||||
padding: 1px 4px;
|
||||
min-width: 40px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.trigger-time {
|
||||
width: 140px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.alert-type {
|
||||
width: 70px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.alert-list-container {
|
||||
max-height: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="pt-2 lg:flex">
|
||||
<Avatar :src="userinfo.avatarUrl || headerImg" :size="72" class="!mx-auto !block" />
|
||||
<div class="mt-2 flex flex-col justify-center md:ml-6 md:mt-0">
|
||||
<h1 class="text-md md:text-lg">早安, {{ userinfo.userName }}, 开始您一天的工作吧！</h1>
|
||||
<h1 class="text-md md:text-lg">您好, {{ userinfo.userName }}, 开始您一天的工作吧！</h1>
|
||||
<span class="text-secondary"> 今日晴，20℃ - 32℃！ </span>
|
||||
</div>
|
||||
<div class="mt-4 flex flex-1 justify-end md:mt-0">
|
||||
|
||||
@@ -0,0 +1,489 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="register"
|
||||
title="主机详情"
|
||||
:showOkBtn="false"
|
||||
:showCancelBtn="false"
|
||||
width="60%"
|
||||
class="server-detail-modal"
|
||||
>
|
||||
<!-- 整体容器 - 淡蓝色背景 -->
|
||||
<div class="server-detail-container">
|
||||
<!-- 左侧基础信息（30%宽度） -->
|
||||
<div class="server-info-left">
|
||||
<div class="info-card base-info-card">
|
||||
<h3 class="card-title">基础信息</h3>
|
||||
<div class="card-grid base-info-content">
|
||||
<!-- 主机名称 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">主机名称:</div>
|
||||
<div class="metric-value ellipsis-text" :title="serverInfo?.sysHostname || '--'">
|
||||
{{ serverInfo?.sysHostname || '--' }}
|
||||
</div>
|
||||
<div class="metric-icon">🖥️</div>
|
||||
</div>
|
||||
|
||||
<!-- IP地址 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">IP 地址:</div>
|
||||
<div class="metric-value ellipsis-text" :title="serverInfo?.ipAddress || '--'">
|
||||
{{ serverInfo?.ipAddress || '--' }}
|
||||
</div>
|
||||
<div class="metric-icon">🌐</div>
|
||||
</div>
|
||||
|
||||
<!-- CPU型号 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">CPU 型号:</div>
|
||||
<div class="metric-value ellipsis-text" :title="serverInfo?.cpuModel || '--'">
|
||||
{{ serverInfo?.cpuModel || '--' }}
|
||||
</div>
|
||||
<div class="metric-icon">⚙️</div>
|
||||
</div>
|
||||
|
||||
<!-- 内存大小 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">内存大小:</div>
|
||||
<div class="metric-value ellipsis-text" :title="serverInfo?.memoryTotal || '--'">
|
||||
{{ serverInfo?.memoryTotal || '--' }}
|
||||
</div>
|
||||
<div class="metric-icon">🧠</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统版本 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-label">系统版本:</div>
|
||||
<div class="metric-value ellipsis-text" :title="serverInfo?.kernelVersion || '--'">
|
||||
{{ serverInfo?.kernelVersion || '--' }}
|
||||
</div>
|
||||
<div class="metric-icon">🖨️</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧磁盘信息（70%宽度） -->
|
||||
<div class="server-info-right">
|
||||
<div class="info-card disk-info-card">
|
||||
<h3 class="card-title">磁盘信息</h3>
|
||||
<div class="disk-table-container disk-info-content">
|
||||
<!-- 自定义表格（固定表头） -->
|
||||
<div class="custom-table-wrapper">
|
||||
<!-- 表格头部 -->
|
||||
<div class="table-header">
|
||||
<div class="table-th" style="width: 200px">
|
||||
<div class="ellipsis-text">挂载路径</div>
|
||||
</div>
|
||||
<div class="table-th" style="width: 180px">
|
||||
<div class="ellipsis-text">设备名称</div>
|
||||
</div>
|
||||
<div class="table-th" style="width: 100px">
|
||||
<div class="ellipsis-text">总容量</div>
|
||||
</div>
|
||||
<div class="table-th" style="width: 100px">
|
||||
<div class="ellipsis-text">已用容量</div>
|
||||
</div>
|
||||
<div class="table-th flex-1">
|
||||
<div class="ellipsis-text">磁盘使用率</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容（可滚动） -->
|
||||
<div class="table-body-wrapper">
|
||||
<div class="table-body">
|
||||
<!-- 空数据提示 -->
|
||||
<div v-if="diskList.length === 0" class="empty-tip">
|
||||
<div class="empty-icon">📁</div>
|
||||
<div class="empty-text">暂无磁盘信息</div>
|
||||
</div>
|
||||
|
||||
<!-- 磁盘数据行 -->
|
||||
<div
|
||||
v-for="(disk, index) in diskList"
|
||||
:key="index"
|
||||
class="table-tr"
|
||||
:class="{ 'table-tr-stripe': index % 2 === 1 }"
|
||||
@mouseenter="hoveredRow = index"
|
||||
@mouseleave="hoveredRow = -1"
|
||||
>
|
||||
<div class="table-td" style="width: 200px">
|
||||
<span class="path-icon">📂</span>
|
||||
<div class="ellipsis-text" :title="disk.mountPoint || '--'">
|
||||
{{ disk.mountPoint || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-td" style="width: 180px">
|
||||
<div class="ellipsis-text" :title="disk.device || '--'">
|
||||
{{ disk.device || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-td" style="width: 100px">
|
||||
<div class="ellipsis-text" :title="`${disk.totalSize || '--'}`">
|
||||
{{ disk.totalSize || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-td" style="width: 100px">
|
||||
<div class="ellipsis-text" :title="`${disk.usedSize || '--'}`">
|
||||
{{ disk.usedSize || '--' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-td flex-1">
|
||||
<!-- 自定义进度条（调整为更细） -->
|
||||
<div class="custom-progress-container">
|
||||
<div
|
||||
class="custom-progress-bar"
|
||||
:style="{
|
||||
width: `${disk.usageRate || 0}%`,
|
||||
backgroundColor: getProgressColor(disk.usageRate)
|
||||
}"
|
||||
:class="{ 'progress-hover': hoveredRow === index }"
|
||||
></div>
|
||||
<span class="custom-progress-text">{{ disk.usageRate || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
|
||||
import { BizDeviceInfo, bizDeviceInfoListAll } from '@jeesite/biz/api/biz/deviceInfo';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal },
|
||||
setup() {
|
||||
// 状态定义
|
||||
const serverInfo = ref();
|
||||
const diskList = ref<BizDeviceInfo[]>([]);
|
||||
const hoveredRow = ref(-1);
|
||||
|
||||
// 模态框注册
|
||||
const [register, { closeModal }] = useModalInner(async (data: any) => {
|
||||
if (!data) return;
|
||||
const { status, ...restData } = data;
|
||||
serverInfo.value = { ...restData };
|
||||
// 获取磁盘列表
|
||||
if (data.hostId) {
|
||||
await getDiskList({ hostId: data.hostId });
|
||||
}
|
||||
});
|
||||
|
||||
// 获取磁盘列表数据
|
||||
const getDiskList = async (params: { hostId: any }) => {
|
||||
try {
|
||||
const result = await bizDeviceInfoListAll(params);
|
||||
diskList.value = result;
|
||||
} catch (error) {
|
||||
console.error('获取磁盘信息失败:', error);
|
||||
diskList.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
// 根据使用率获取进度条颜色
|
||||
const getProgressColor = (rate?: number) => {
|
||||
const usageRate = typeof rate === 'number' ? rate : 0;
|
||||
if (usageRate >= 80) return '#f56c6c'; // 红色
|
||||
if (usageRate >= 60) return '#e6a23c'; // 黄色
|
||||
return '#409eff'; // 蓝色（默认）
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
closeModal,
|
||||
serverInfo,
|
||||
diskList,
|
||||
hoveredRow,
|
||||
getProgressColor
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 整体容器样式 - 淡蓝色背景 */
|
||||
.server-detail-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f0f8ff;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 左侧基础信息容器 (30%) */
|
||||
.server-info-left {
|
||||
width: 30%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 右侧磁盘信息容器 (70%) */
|
||||
.server-info-right {
|
||||
width: 70%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* 卡片通用样式 */
|
||||
.info-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 基础信息网格布局 */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 核心修复：基础信息卡片布局约束 */
|
||||
.metric-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
/* 强制不换行 */
|
||||
white-space: nowrap;
|
||||
/* 防止卡片本身溢出 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
flex: 0 0 80px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
/* 标签固定宽度，防止挤压 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 核心修复：值区域强制省略 */
|
||||
.metric-value {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
font-weight: 500;
|
||||
/* 关键：强制文本省略的完整属性 */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
/* 限制最大宽度，避免挤压图标 */
|
||||
max-width: calc(100% - 104px);
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
flex: 0 0 24px;
|
||||
font-size: 18px;
|
||||
text-align: right;
|
||||
/* 图标固定宽度，不参与弹性布局 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 表格容器样式 */
|
||||
.custom-table-wrapper {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e6e6e6;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-th {
|
||||
padding: 12px 8px;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-body-wrapper {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-tr {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.table-tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table-tr-stripe {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.table-tr:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.table-td {
|
||||
padding: 12px 8px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
/* 省略文本样式 */
|
||||
.ellipsis-text {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
min-width: 0; /* 解决flex子元素省略失效问题 */
|
||||
}
|
||||
|
||||
/* 空数据提示 */
|
||||
.empty-tip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 自定义进度条 - 调整为更细的样式 */
|
||||
.custom-progress-container {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.custom-progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.custom-progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 11px;
|
||||
color: #303133;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 图标样式 */
|
||||
.disk-icon, .path-icon {
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 卡片动画 */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.5s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 - 优化60%宽度下的显示 */
|
||||
@media (max-width: 1024px) {
|
||||
.server-detail-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.server-info-left, .server-info-right {
|
||||
width: 100%;
|
||||
}
|
||||
.server-info-left {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 小屏下列宽进一步优化 */
|
||||
.table-th, .table-td {
|
||||
width: auto !important;
|
||||
flex: 1;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.table-th:nth-child(1), .table-td:nth-child(1) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.table-th:nth-child(5), .table-td:nth-child(5) {
|
||||
flex: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 适配移动端 */
|
||||
@media (max-width: 768px) {
|
||||
:deep(.server-detail-modal) {
|
||||
width: 95% !important;
|
||||
}
|
||||
|
||||
.custom-progress-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,455 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="register"
|
||||
title="预警详情"
|
||||
@ok="handleSubmit"
|
||||
:showFooter="true"
|
||||
width="45%"
|
||||
@cancel="handleCancel"
|
||||
class="warning-detail-modal"
|
||||
>
|
||||
<div class="warning-detail-container">
|
||||
<div class="title-row">
|
||||
<div class="title-wrapper">
|
||||
<h3 class="warning-title">{{ warningData?.alertTitle || '--' }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="basic-info-card">
|
||||
<div class="basic-info-left">
|
||||
<div class="info-item">
|
||||
<span class="label">预警编码：</span>
|
||||
<span class="value">{{ warningData?.alertCode || '--' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警类型：</span>
|
||||
<span class="value">{{ warningData?.alertType || '--' }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">预警级别：</span>
|
||||
<span class="value level-value" :class="`level-${warningData?.alertLevel}`">
|
||||
{{ getLevelText(warningData?.alertLevel) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="basic-info-right">
|
||||
<div class="info-item status-select">
|
||||
<span class="label">预警状态：</span>
|
||||
<select
|
||||
v-model="currentStatus"
|
||||
size="small"
|
||||
placeholder="请选择状态"
|
||||
class="status-selector"
|
||||
>
|
||||
<option label="未处理" value="0" />
|
||||
<option label="处理中" value="1" />
|
||||
<option label="已解决" value="2" />
|
||||
<option label="已忽略" value="3" />
|
||||
<option label="已关闭" value="4" />
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card card">
|
||||
<div class="card-header">
|
||||
<span class="label block-label">预警内容</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<textarea
|
||||
v-model="alertContent"
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
placeholder="暂无预警内容..."
|
||||
class="content-input"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="meta-card card">
|
||||
<div class="card-body meta-info">
|
||||
<div class="meta-right">
|
||||
<div class="meta-item">
|
||||
<span class="label">预警时间：</span>
|
||||
<span class="value">{{ warningData?.triggerTime || '--' }}</span>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<span class="label">来源系统：</span>
|
||||
<span class="value">{{ warningData?.sourceSystem || '--' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="opinion-card card">
|
||||
<div class="card-header">
|
||||
<span class="label block-label">处理意见</span>
|
||||
<span class="required-mark">*</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<textarea
|
||||
v-model="handleOpinion"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入处理意见"
|
||||
class="opinion-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted, watch } from 'vue';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
|
||||
import { BizWarningAlert, bizWarningAlertSave } from '@jeesite/biz/api/biz/warningAlert';
|
||||
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal },
|
||||
emits: ['modalClose'],
|
||||
setup(props, { emit }) {
|
||||
const warningData = ref<BizWarningAlert | null>(null);
|
||||
const handleOpinion = ref('');
|
||||
const currentStatus = ref('');
|
||||
const alertContent = ref('');
|
||||
const { createMessage } = useMessage();
|
||||
|
||||
const [register, { closeModal }] = useModalInner(async (data: any) => {
|
||||
warningData.value = { ...data };
|
||||
currentStatus.value = data.alertStatus
|
||||
alertContent.value = data.alertContent
|
||||
handleOpinion.value = data.handleNote
|
||||
});
|
||||
|
||||
watch(currentStatus, (val) => {
|
||||
if (warningData.value) {
|
||||
warningData.value.alertStatus = val;
|
||||
}
|
||||
});
|
||||
|
||||
watch(alertContent, (val) => {
|
||||
if (warningData.value) {
|
||||
warningData.value.alertContent = val;
|
||||
}
|
||||
});
|
||||
|
||||
const getLevelText = (level: number | undefined) => {
|
||||
if (!level) return '未知';
|
||||
const levelMap = {
|
||||
1: '紧急',
|
||||
2: '高',
|
||||
3: '中',
|
||||
4: '低',
|
||||
};
|
||||
return levelMap[level as keyof typeof levelMap] || '未知';
|
||||
};
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!handleOpinion.value.trim()) {
|
||||
createMessage.warning('请输入处理意见');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
...warningData.value,
|
||||
handleNote: handleOpinion.value,
|
||||
}
|
||||
|
||||
const params = {
|
||||
id: warningData.value.id
|
||||
};
|
||||
|
||||
const res = await bizWarningAlertSave(params, data);
|
||||
createMessage.success(res.message);
|
||||
closeModal();
|
||||
handleCancel()
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('modalClose');
|
||||
};
|
||||
|
||||
return {
|
||||
register,
|
||||
closeModal,
|
||||
handleCancel,
|
||||
handleSubmit,
|
||||
warningData,
|
||||
handleOpinion,
|
||||
getLevelText,
|
||||
currentStatus,
|
||||
alertContent,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 全局盒模型重置 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 主容器样式 - 淡蓝色背景 */
|
||||
.warning-detail-container {
|
||||
padding: 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #f0f8ff; /* 淡蓝色背景 */
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 标题行（居中） */
|
||||
.title-row {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #d1e7ff;
|
||||
display: flex;
|
||||
justify-content: center; /* 整体居中 */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center; /* 内容居中 */
|
||||
flex-direction: column; /* 级别标签在上，标题在下 */
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.level-tag {
|
||||
padding: 4px 16px;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 不同级别标签配色 */
|
||||
.level-tag--1 { background-color: #f53f3f; }
|
||||
.level-tag--2 { background-color: #ff7d00; }
|
||||
.level-tag--3 { background-color: #ff9a2e; }
|
||||
.level-tag--4 { background-color: #14b1ab; }
|
||||
|
||||
.warning-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
word-break: break-all;
|
||||
text-align: center; /* 文字居中 */
|
||||
}
|
||||
|
||||
/* 基础信息卡片（左右布局）- 优化背景和间距 */
|
||||
.basic-info-card {
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between; /* 左右分离 */
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
border: 1px solid #d1e7ff;
|
||||
}
|
||||
|
||||
/* 左侧基础信息 - 紧凑间距 */
|
||||
.basic-info-left {
|
||||
display: flex;
|
||||
gap: 15px; /* 缩小间距，更紧凑 */
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.basic-info-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 12px; /* 缩小最小宽度 */
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
margin-right: 6px; /* 缩小标签和值的间距 */
|
||||
white-space: nowrap;
|
||||
font-size: 13px; /* 微调字体大小 */
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
font-size: 13px; /* 微调字体大小 */
|
||||
}
|
||||
|
||||
/* 级别文字配色 */
|
||||
.level-1 { color: #f53f3f; font-weight: 500; }
|
||||
.level-2 { color: #ff7d00; font-weight: 500; }
|
||||
.level-3 { color: #ff9a2e; font-weight: 500; }
|
||||
.level-4 { color: #14b1ab; font-weight: 500; }
|
||||
|
||||
/* 状态选择器 - 缩小尺寸 */
|
||||
.status-selector {
|
||||
padding: 4px 8px; /* 缩小内边距 */
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
font-size: 12px; /* 缩小字体 */
|
||||
transition: all 0.2s;
|
||||
min-width: 90px; /* 缩小宽度 */
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
|
||||
height: 28px; /* 固定高度 */
|
||||
}
|
||||
|
||||
.status-selector:focus {
|
||||
outline: none;
|
||||
border-color: #4096ff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.1), 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 通用卡片样式 - 优化边框和阴影 */
|
||||
.card {
|
||||
border: 1px solid #d1e7ff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
transition: box-shadow 0.2s;
|
||||
width: 100%;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid #e8f4ff;
|
||||
background: #f8fbff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.block-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.required-mark {
|
||||
color: #f53f3f;
|
||||
font-size: 14px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* 卡片内容区 */
|
||||
.card-body {
|
||||
padding: 14px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 预警内容（只读样式） */
|
||||
.content-input {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d1e7ff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
resize: none; /* 禁止调整大小 */
|
||||
background-color: #f8fbff; /* 淡蓝色只读背景 */
|
||||
color: #333;
|
||||
cursor: default; /* 禁用光标 */
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.content-input:focus {
|
||||
outline: none; /* 只读状态取消焦点样式 */
|
||||
border-color: #d1e7ff;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 处理意见输入框 */
|
||||
.opinion-input {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d1e7ff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.2s;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.opinion-input:focus {
|
||||
outline: none;
|
||||
border-color: #4096ff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 150, 255, 0.1);
|
||||
}
|
||||
|
||||
/* HTML预览区（数据库/HTML格式展示） */
|
||||
.html-preview {
|
||||
padding: 12px;
|
||||
border: 1px dashed #d1e7ff;
|
||||
border-radius: 6px;
|
||||
background-color: #fefefe;
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap; /* 保留换行和空格（数据库格式） */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* 元信息（最右侧展示）- 紧凑间距 */
|
||||
.meta-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end; /* 整体右对齐 */
|
||||
}
|
||||
|
||||
.meta-right {
|
||||
display: flex;
|
||||
gap: 15px; /* 缩小间距，更紧凑 */
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 12px; /* 缩小最小宽度 */
|
||||
justify-content: flex-end; /* 文字右对齐 */
|
||||
}
|
||||
|
||||
.meta-item .label {
|
||||
margin-right: 6px; /* 缩小标签间距 */
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.meta-item .value {
|
||||
color: #333;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@@ -1,28 +1,124 @@
|
||||
<template>
|
||||
<PageWrapper>
|
||||
<template #headerContent> <WorkbenchHeader /> </template>
|
||||
<div class="lg:flex">
|
||||
<div class="enter-y w-full !mr-4 lg:w-7/10">
|
||||
<ProjectCard :loading="loading" class="enter-y" />
|
||||
<DynamicInfo :loading="loading" class="enter-y !my-4" />
|
||||
<PageWrapper class="workbench-page">
|
||||
<template #headerContent>
|
||||
<WorkbenchHeader class="workbench-header" />
|
||||
</template>
|
||||
<div class="workbench-container">
|
||||
<div class="workbench-main">
|
||||
<ProjectCard :loading="loading" class="workbench-card" />
|
||||
<DynamicInfo :loading="loading" class="workbench-card workbench-card--middle" />
|
||||
</div>
|
||||
<div class="enter-y w-full lg:w-3/10">
|
||||
<QuickLogin :loading="loading" class="enter-y" />
|
||||
<div class="workbench-sidebar">
|
||||
<QuickLogin :loading="loading" class="workbench-card" />
|
||||
<WarningAlert :loading="loading" />
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Analysis">
|
||||
import { ref } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import WorkbenchHeader from './components/WorkbenchHeader.vue';
|
||||
import ProjectCard from './components/ProjectCard.vue';
|
||||
import DynamicInfo from './components/DynamicInfo.vue';
|
||||
import QuickLogin from './components/QuickLogin.vue';
|
||||
|
||||
const loading = ref(true);
|
||||
setTimeout(() => {
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Card } from 'ant-design-vue';
|
||||
import { PageWrapper } from '@jeesite/core/components/Page';
|
||||
import WorkbenchHeader from './components/WorkbenchHeader.vue';
|
||||
import ProjectCard from './components/ProjectCard.vue';
|
||||
import DynamicInfo from './components/DynamicInfo.vue';
|
||||
import QuickLogin from './components/QuickLogin.vue';
|
||||
import WarningAlert from './components/WarningAlert.vue';
|
||||
const loading = ref(true);
|
||||
|
||||
// 优化 loading 逻辑，避免闪屏
|
||||
onMounted(() => {
|
||||
const timer = setTimeout(() => {
|
||||
loading.value = false;
|
||||
clearTimeout(timer);
|
||||
}, 800);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
:root {
|
||||
--vh: 100vh;
|
||||
}
|
||||
|
||||
.workbench-page {
|
||||
// 替代固定 100vh，兼容移动端动态视口
|
||||
min-height: var(--vh);
|
||||
// 确保页面占满视口，同时支持内容溢出滚动
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
// 初始化视口高度（解决移动端地址栏导致的 100vh 不准确）
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
// 动态计算视口高度
|
||||
@media (max-width: 768px) {
|
||||
--vh: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workbench-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px; // 替代 margin，更易维护
|
||||
height: calc(100% - 48px); // 预留头部空间
|
||||
padding: 0 16px;
|
||||
overflow: auto; // 内容溢出时滚动
|
||||
|
||||
// 大屏适配
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
height: calc(100% - 64px);
|
||||
gap: 24px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.workbench-main {
|
||||
flex: 7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px; // 替代 !my-4
|
||||
}
|
||||
|
||||
.workbench-sidebar {
|
||||
flex: 3;
|
||||
display: flex;
|
||||
gap: 8px; /* 核心：设置两个组件间距为4px */
|
||||
width: 100%; /* 确保宽度自适应 */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.workbench-card {
|
||||
width: 100%;
|
||||
flex-shrink: 0; // 防止卡片被压缩
|
||||
|
||||
// 中间卡片的间距（替代 !my-4）
|
||||
&.workbench-card--middle {
|
||||
margin: 16px 0 !important;
|
||||
}
|
||||
|
||||
// loading 状态下保持布局稳定
|
||||
&:has(.ant-skeleton) {
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.workbench-header {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
// 修复 enter-y 可能的布局问题（如果是自定义类）
|
||||
.enter-y {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user