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