manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新容器获取

Browse Source
This commit is contained in:
gaoxq
2026-02-16 16:21:00 +08:00
parent 0817b1aa48
commit 48455f4ec1
1 changed files with 117 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
web-vue/packages/core/layouts/views/desktop/analysis/components/info/DockerInfo.vue
View File

@@ -23,7 +23,11 @@
<div v-if="loading" class="loading-placeholder"> <div v-if="loading" class="loading-placeholder">
<a-skeleton :paragraph="{ rows: 3 }" style="width: 100%" active /> <a-skeleton :paragraph="{ rows: 3 }" style="width: 100%" active />
</div> </div>
<div class="container-card-list"> <!-- 无数据提示 -->
<div v-else-if="filteredContainerList.length === 0" class="no-result">
暂无容器数据
</div>
<div v-else class="container-card-list">
<a-card <a-card
v-for="item in filteredContainerList" v-for="item in filteredContainerList"
:key="item.id" :key="item.id"
@@ -46,6 +50,7 @@
<span class="mem-text">内存: {{ item.memUsage }}%</span> <span class="mem-text">内存: {{ item.memUsage }}%</span>
</div> </div>
</div> </div>
<!-- 修改：统一info-item的布局结构 -->
<div class="detail-info-group"> <div class="detail-info-group">
<div class="info-item"> <div class="info-item">
<span class="label">容器ID：</span> <span class="label">容器ID：</span>
@@ -71,15 +76,15 @@
<span class="value">{{ item.status || '无' }}</span> <span class="value">{{ item.status || '无' }}</span>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
<div class="action-divider"></div> <div class="action-divider"></div>
<div class="action-button-section"> <div class="action-button-section">
<a-space size="middle"> <a-space size="middle">
<a-button size="small" @click="handleRestart(item)">重启</a-button> <a-button size="small" @click="handleRestart(item)">重启</a-button>
<a-button type="error" size="small" @click="handleStop(item)" :disabled="item.state == '0'" > 停止</a-button> <a-button type="error" size="small" @click="handleStop(item)" :disabled="item.state == '0'" > 停止</a-button>
<a-button type="success" size="small" @click="handleStart(item)" :disabled="item.state == '1'" >启动</a-button> <a-button type="success" size="small" @click="handleStart(item)" :disabled="item.state == '1'" >启动</a-button>
</a-space> </a-space>
</div> </div>
</div> </div>
</a-card> </a-card>
</div> </div>
@@ -90,11 +95,11 @@
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'; import { defineComponent, ref, onMounted } from 'vue';
import { Tag, Tabs, TabPane, Tooltip, InputSearch } from 'ant-design-vue'; // 显式导入InputSearch import { Tag, Tabs, TabPane, Tooltip, InputSearch } from 'ant-design-vue';
import { BasicModal, useModalInner } from '@jeesite/core/components/Modal'; import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
import { useMessage } from '@jeesite/core/hooks/web/useMessage'; import { useMessage } from '@jeesite/core/hooks/web/useMessage';
import { DockerInfo , bizDockerInfoList, bizDockerRestart, bizDockerStart, bizDockerStop } from '@jeesite/biz/api/biz/myWork'; import { DockerInfo , bizDockerInfoList, bizDockerRestart, bizDockerStart, bizDockerStop } from '@jeesite/biz/api/biz/myWork';
import { message, Modal } from 'ant-design-vue'; import { Modal } from 'ant-design-vue';
export default defineComponent({ export default defineComponent({
components: { BasicModal, Tag, Tabs, TabPane, Tooltip, InputSearch }, components: { BasicModal, Tag, Tabs, TabPane, Tooltip, InputSearch },
@@ -112,8 +117,8 @@ export default defineComponent({
searchKey.value = value; searchKey.value = value;
}; };
const onSearch = async () => { // 修改：重构搜索逻辑，分离过滤和数据获取
await getDockerList(); const filterContainerList = () => {
if (!searchKey.value.trim()) { if (!searchKey.value.trim()) {
filteredContainerList.value = [...containerList.value]; filteredContainerList.value = [...containerList.value];
return; return;
@@ -127,6 +132,11 @@ export default defineComponent({
filteredContainerList.value = filtered; filteredContainerList.value = filtered;
}; };
const onSearch = async () => {
await getDockerList();
filterContainerList(); // 数据获取后再过滤
};
const getDockerList = async () => { const getDockerList = async () => {
try { try {
loading.value = true; loading.value = true;
@@ -143,9 +153,9 @@ export default defineComponent({
} finally { } finally {
loading.value = false; loading.value = false;
} }
}; };
const handleRestart = async (item: DockerInfo) => { const handleRestart = async (item: DockerInfo) => {
Modal.confirm({ Modal.confirm({
title: '温馨提示', title: '温馨提示',
content: '您确定要重启当前容器吗?', content: '您确定要重启当前容器吗?',
@@ -154,64 +164,76 @@ export default defineComponent({
okType: 'danger', okType: 'danger',
width: 420, width: 420,
onOk: async () => { onOk: async () => {
try { try {
const res = await bizDockerRestart(item); loading.value = true;
createMessage.success(res.message); const res = await bizDockerRestart(item);
onSearch(); createMessage.success(res.message || '重启成功');
} catch (error) { await getDockerList();
filterContainerList();
} catch (error: any) {
console.error('重启容器失败:', error); console.error('重启容器失败:', error);
} } finally {
loading.value = false;
}
}, },
onCancel: () => { onCancel: () => {
createMessage.info('已取消重启操作'); createMessage.info('已取消重启操作');
} }
}); });
}; };
const handleStop = async (item: DockerInfo) => { const handleStop = async (item: DockerInfo) => {
Modal.confirm({ Modal.confirm({
title: '温馨提示', title: '温馨提示',
content: '您确定要停止当前容器吗?', content: '您确定要停止当前容器吗?',
okText: '确认', okText: '确认',
cancelText: '取消', cancelText: '取消',
okType: 'danger', okType: 'danger',
width: 420, width: 420,
onOk: async () => { onOk: async () => {
try { try {
const res = await bizDockerStop(item); loading.value = true;
createMessage.success(res.message); const res = await bizDockerStop(item);
onSearch(); createMessage.success(res.message || '停止成功');
} catch (error) { await getDockerList();
console.error('停止容器失败:', error); filterContainerList();
} } catch (error: any) {
}, console.error('停止容器失败:', error);
onCancel: () => { } finally {
createMessage.info('已取消停止操作'); loading.value = false;
} }
}); },
}; onCancel: () => {
createMessage.info('已取消停止操作');
const handleStart = async (item: DockerInfo) => { }
Modal.confirm({ });
title: '温馨提示', };
content: '您确定要启动当前容器吗?',
okText: '确认', const handleStart = async (item: DockerInfo) => {
cancelText: '取消', Modal.confirm({
okType: 'danger', title: '温馨提示',
width: 420, content: '您确定要启动当前容器吗?',
onOk: async () => { okText: '确认',
try { cancelText: '取消',
const res = await bizDockerStart(item); okType: 'danger',
createMessage.success(res.message); width: 420,
onSearch(); onOk: async () => {
} catch (error) { try {
console.error('启动容器失败:', error); loading.value = true;
} const res = await bizDockerStart(item);
}, createMessage.success(res.message || '启动成功');
onCancel: () => { await getDockerList();
createMessage.info('已取消启动操作'); filterContainerList();
} } catch (error: any) {
}); console.error('启动容器失败:', error);
} finally {
loading.value = false;
}
},
onCancel: () => {
createMessage.info('已取消启动操作');
}
});
}; };
const [register, { closeModal }] = useModalInner(async (data: any) => { const [register, { closeModal }] = useModalInner(async (data: any) => {
@@ -232,9 +254,9 @@ export default defineComponent({
loading, loading,
searchKey, searchKey,
containerList, containerList,
filteredContainerList, filteredContainerList,
handleRestart, handleRestart,
handleStop, handleStop,
handleStart, handleStart,
}; };
}, },
@@ -242,7 +264,7 @@ export default defineComponent({
</script> </script>
<style scoped> <style scoped>
/* 样式部分保持不变 */ /* 样式部分保持不变，重点修改info-item相关样式 */
.container-outer-wrapper { .container-outer-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -342,43 +364,48 @@ export default defineComponent({
.cpu-text { color: #2f54eb; font-weight: 500; } .cpu-text { color: #2f54eb; font-weight: 500; }
.mem-text { color: #1890ff; font-weight: 500; } .mem-text { color: #1890ff; font-weight: 500; }
/* 修改：重构detail-info-group和info-item样式，确保每个item宽度一致 */
.detail-info-group { .detail-info-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 24px; /* 增加间距，提升美观度 */
font-size: 14px; font-size: 14px;
flex-wrap: nowrap; flex-wrap: wrap; /* 改为wrap，适配小屏幕 */
overflow: hidden; padding: 4px 0;
white-space: nowrap;
} }
.info-item { .info-item {
display: flex; display: flex;
align-items: center; align-items: center;
width: 220px; /* 统一宽度 */
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box;
} }
.info-item .label { .info-item .label {
color: #667085; color: #667085;
margin-right: 4px; margin-right: 4px;
width: 70px; /* 标签固定宽度 */
flex-shrink: 0;
text-align: right;
} }
.info-item .value { .info-item .value {
color: #344054; color: #344054;
max-width: 200px; width: 140px; /* 值区域固定宽度 */
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
} }
.action-divider { .action-divider {
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #f0f7fb; background-color: #f0f7fb;
margin: 4px 0; margin: 4px 0;
} }
.action-button-section { .action-button-section {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
@@ -410,5 +437,11 @@ export default defineComponent({
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
} }
.info-item {
width: 100%; /* 移动端占满宽度 */
}
.info-item .label {
text-align: left; /* 移动端标签左对齐 */
}
} }
</style> </style>