<template>
<a-card title="环境管理">
<a-spin size="large" v-if="envLoading" class="spin"/>
<div v-else>
<a-row :gutter="[48,32]" type="
flex" justify="center" style="margin-bottom: 38px">
<a-col :span="8" v-for="(env, index) in environments" :key="index">
<a-card :title="env
.envName" class="env-card hover-env-card">
<template #extra>
<a-button type="primary" @click="openOperateDrawer(env
.envName)">操作</a-button>
</template>
<svg t="1750909569074" class="icon" viewBox="0 0 1024 1024" version="1
.1" xmlns="http://www
.w3
.org/2000/svg"
p-id="6580" width="128" height="128">
<path :fill="env
.status === '在线' ? '#005bac' : '#bfbfbf'"
d="M180
.532703 507
.367493c158
.678976-65
.355497 235
.486292-30
.474059 304
.269865 16
.21838l-79
.440283 273
.0447c-69
.018933-46
.431495-144
.083559-84
.635609-303
.396985-18
.776645l77
.643358-270
.088368L180
.532703 507
.367493zM526
.399965 549
.988196c68
.989257 46
.397726 139
.539057 80
.43903 301
.656341 24
.985044l-75
.661214 263
.243473c-159
.14151 65
.832358-235
.541551 28
.585035-304
.439734-18
.128893L526
.399965 549
.988196zM498
.022661 474
.363821c-41
.512463-27
.970028-86
.198198-54
.113455-149
.667741-54
.582129-41
.86448-0
.322341-91
.709725 11
.587919-155
.011446 37
.731346l78
.410837-271
.752264c159
.198815-65
.822125 235
.701187-28
.520567 304
.673048 18
.128893L498
.022661 474
.363821zM922
.033677 249
.996774c-158
.988014 65
.700351-235
.394195 28
.753881-304
.214606-17
.613146l-78
.428234 271
.986601c68
.7672 46
.62797 151
.876036 84
.896552 304
.315914 16
.685008L922
.033677 249
.996774z"
p-id="6581"></path>
</svg>
<a-descriptions :column="1" :bordered="true" size="small">
<a-descriptions-item label="状态">
<span v-if="env
.status === '在线'">🟢在线</span>
<span v-else-if="env
.status === '离线'">⚪离线</span>
</a-descriptions-item>
<a-descriptions-item label="Python版本">
{{ env
.pythonVersion }}
</a-descriptions-item>
<a-descriptions-item label="物理内存总量">
{{ env
.total
Memory }} MB
</a-descriptions-item>
<a-descriptions-item label="可用的物理内存">
{{ env
.available
Memory }} MB
</a-descriptions-item>
<a-descriptions-item label="执行主机">
<span v-for="(host, hostIndex) in env
.executeHosts" :key="hostIndex">
{{ host }}
<br v-if="hostIndex !== env
.executeHosts
.length - 1"/>
</span>
</a-descriptions-item>
</a-descriptions>
</a-card>
</a-col>
</a-row>
</div>
<EnvInstallDrawer ref="EnvInstallDrawer"/>
</a-card>
</template>
<script>
import axios from "axios";
import EnvInstallDrawer from "@/vela/win/env/component/envInstallDrawer";
export default {
name: "env",
components: {EnvInstallDrawer},
data() {
return {
envLoading: false,
installVisible: false,
uninstallVisible: false,
environments: [],
}
},
mounted() {
this
.querySharedHost();
},
methods: {
querySharedHost() {
this
.envLoading = true;
axios
.get('/win/gateway/querySharedHost')
.then(res => {
this
.environments = res;
})
.catch(() => {
this
.$message
.error({message: '获取共享主机信息失败，请联系管理员！'});
})
.finally(() => {
this
.envLoading = false;
}
)
},
openOperateDrawer(envName){
this
.$refs
.EnvInstallDrawer
.visible = true;
this
.$refs
.EnvInstallDrawer
.envName = envName;
}
}
}
</script>
<style scoped lang="less">
.env-card {
height: 100%;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0
.2);
.ant-card-head-title:before {
height: 20px !import
ant;
margin-top: 5px;
}
.ant-btn-icon-only {
font-size: 19px;
}
}
.env-card svg {
display: block;
margin: 0 auto;
}
.hover-env-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0
.2); /* 更强的阴影 */
transform: translateY(-3px); /* 上移 */
transition: all 0
.2s ease; /* 平滑过渡 */
}
::v-deep
.ant-descriptions-item-label {
font-size: 16px !import
ant;
text-align: center;
}
::v-deep
.ant-descriptions-item-content {
font-size: 16px !import
ant;
text-align: center;
}
.uninstall:hover {
background-color: rgba(191, 191, 191, 0
.5) !import
ant;
}
.spin {
height: 300px;
margin-left: 45%;
margin-top: 150px;
}
</style>
<template>
<a-drawer
title="环境操作"
placement="right"
:visible="visible"
@close="visible = false"
width="850px"
class="drawer"
>
<svg t="1751269061412" class="icon" viewBox="0 0 1024 1024" version="1
.1" xmlns="http://www
.w3
.org/2000/svg"
p-id="24642" width="128" height="128">
<path
d="M924 708h-40
.54a142
.81 142
.81 0 0 0-15
.41-37
.14l28
.69-28
.68a36 36 0 0 0 0-50
.92 36 36 0 0 0-50
.92 0L817
.14 620A142
.81 142
.81 0 0 0 780 604
.54V564a36 36 0 0 0-36-36 36 36 0 0 0-36 36v40
.54A142
.81 142
.81 0 0 0 670
.86 620l-28
.68-28
.69a36 36 0 0 0-50
.92 0 36 36 0 0 0 0 50
.92L620 670
.86A142
.81 142
.81 0 0 0 604
.54 708H564a36 36 0 0 0-36 36 36 36 0 0 0 36 36h40
.54A142
.81 142
.81 0 0 0 620 817
.14l-28
.69 28
.68a36 36 0 0 0 0 50
.92 36 36 0 0 0 50
.91 0l28
.68-28
.69a142
.81 142
.81 0 0 0 37
.1 15
.41V924a36 36 0 0 0 36 36 36 36 0 0 0 36-36v-40
.54a142
.81 142
.81 0 0 0 37
.14-15
.41l28
.68 28
.69a36 36 0 0 0 50
.92 0 36 36 0 0 0 0-50
.92l-28
.69-28
.68A142
.81 142
.81 0 0 0 883
.46 780H924a36 36 0 0 0 36-36 36 36 0 0 0-36-36zM744 816a72 72 0 1 1 72-72 72 72 0 0 1-72 72z"
fill="#005bac" p-id="24643"></path>
<path
d="M860 64H164c-55 0-100 45-100 100v516c0 55 45 100 100 100h220v108H244a36 36 0 0 0-36 36 36 36 0 0 0 36 36h176a36 36 0 0 0 36-36V744a36 36 0 0 0-36-36H186a50
.15 50
.15 0 0 1-50-50v-59h284a36 36 0 0 0 36-36 36 36 0 0 0-36-36H136V186a50
.15 50
.15 0 0 1 50-50h652a50
.15 50
.15 0 0 1 50 50v234a36 36 0 0 0 36 36 36 36 0 0 0 36-36V164c0-55-45-100-100-100z"
fill="#005bac" p-id="24644"></path>
</svg>
<span class="envName">{{ envName }}</span>
<a-card title="操作日志" style="margin-top: 18px">
<pre ref="
outputPre">
{{ current
Output }}
</pre>
<a-form-model :model="command" lay
out="vertical">
<a-form-model-item label="命令">
<a-input-group compact style="display:
flex; align-items: center">
<a-select
placeholder="请选择命令类型"
style="width: 23%"
v-model="command
.select"
>
<a-select-option value="Python环境安装">
Python环境安装
</a-select-option>
<a-select-option value="Python环境卸载">
Python环境卸载
</a-select-option>
<a-select-option value="依赖安装">
依赖安装
</a-select-option>
</a-select>
<a-input-number :min="0" :step="0
.1" v-model="command
.input" style="width: 20%" @pressEnter="sendCommand"
placeholder="请输入Python版本"
v-if="command
.select === undefined || command
.select === 'Python环境安装'"
:disabled="!command
.select"/>
<a-input-number :min="0" :step="0
.1" v-model="command
.input" style="width: 30%" @pressEnter="sendCommand"
placeholder="请仔细核查再发送卸载命令" v-else-if="command
.select === 'Python环境卸载'" disabled/>
<a-input style="width: 40%" v-model="command
.input" @pressEnter="sendCommand" placeholder="请输入" v-else
:disabled="!command
.select"/>
<a-button type="primary" style="margin-left: 18px" @click="sendCommand" :disabled="!command
.select" :loading="isExecuting">发送
</a-button>
</a-input-group>
</a-form-model-item>
</a-form-model>
</a-card>
</a-drawer>
</template>
<script>
import websocket from "@/config/websocket/websocket";
export default {
name: "envInstallDrawer",
data() {
return {
envName: '',
// account: this
.$store
.getters['account/user'],
account: {
username: 'fangpeiyuan'
},
visible: false,
current
Output: '',
messages: [],
stompClient: null,
isExecuting: false, // 控制命令是否正在执行
command: {
select: undefined,
input: ''
}
}
},
mounted() {
this
.connectWebSocket();
},
methods: {
async connectWebSocket() {
try {
this
.stompClient = await websocket
.connect(this
.account
.username);
const subscription = this
.stompClient
.subscribe(`/topic/
outputFromGateway/${this
.account
.username}`, (message) => {
const
output = message
.body;
if (
output
.startsWith("⏹")) {
this
.isExecuting = false; // 命令执行结束，允许用户继续输入
return;
}
this
.current
Output +=
output
.trim() + '\n';
this
.$nextTick(() => {
if (this
.$refs
.outputPre) {
this
.$refs
.outputPre
.scrollTop = this
.$refs
.outputPre
.scrollHeight;
}
});
});
this
.stompClient
.onDisconnect = () => {
subscription
.unsubscribe();
};
// 检查命令执行状态
await this
.checkCommandStatus();
} catch (
error) {
console
.error('WebSocket连接失败:',
error);
}
},
async checkCommandStatus() {
try {
const response = await fetch(`/win/gateway/checkCommandStatus/${this
.account
.username}`);
if (!response
.ok) {
console
.error('无法获取命令状态');
return;
}
this
.isExecuting = await response
.json(); // 更新前端状态
if (this
.isExecuting) {
this
.$message
.info({'message':'上个命令仍未执行完，已继续执行上个命令。'});
}
} catch (
error) {
console
.error('检查命令状态时出错:',
error);
}
},
sendCommand() {
this
.command
.input = '';
if (this
.isExecuting){
this
.$message
.info({'message':'请等待上个命令执行完毕。'});
return;
}
this
.isExecuting = true;
this
.messages
.push(this
.index + '
. ' + this
.command
.input);
this
.index += 1;
this
.command
.input = '';
if (this
.stompClient) {
// 删除 current
Output 的最后一个非空行
if (this
.current
Output) {
let lastNewLineIndex = this
.current
Output
.lastIndex
Of('\n');
let lastNonEmptyIndex = -1;
// 从后往前遍历，找到最后一个非空行的起始位置
for (let i = this
.current
Output
.length - 1; i >= 0; i--) {
if (this
.current
Output[i] === '\n') {
// 如果当前字符是换行符，并且之前的字符不是空白字符，则记录位置
if (lastNewLineIndex !== -1 && i < lastNewLineIndex) {
lastNonEmptyIndex = lastNewLineIndex;
break;
}
lastNewLineIndex = i;
} else if (this
.current
Output[i]
.trim() !== '') {
// 找到非空字符，更新 lastNewLineIndex
lastNewLineIndex = i;
}
}
// 如果找到了非空行，则删除它
if (lastNonEmptyIndex !== -1) {
const nextNewLineIndex = this
.current
Output
.index
Of('\n', lastNonEmptyIndex);
if (nextNewLineIndex === -1) {
this
.current
Output = this
.current
Output
.substring(0, lastNonEmptyIndex);
} else {
this
.current
Output = this
.current
Output
.substring(0, lastNonEmptyIndex) + this
.current
Output
.substring(nextNewLineIndex);
}
}
// 删除最后一个空行
if (this
.current
Output
.endsWith('\n')) {
this
.current
Output = this
.current
Output
.substring(0, this
.current
Output
.length - 1);
}
}
// 发送命令
this
.stompClient
.publish({
destination: '/gateway/toExecute',
body: JSON
.stringify({
select: this
.command
.select,
command: this
.command
.input,
envName: this
.envName,
userId: this
.account
.username
}),
});
}
},
async abortCommand() {
if (this
.stompClient) {
const response = await fetch(`/win/gateway/toHandleAbort/${this
.account
.username}`);
if (response) {
this
.messages
.push("已发送中止命令");
}
}
},
}
}
</script>
<style scoped>
.drawer svg {
display: block;
margin: 8px auto 0;
}
pre {
white-space: pre-line;
border: 1px solid #ddd;
background: #282c34;
color: #fff;
padding: 15px;
border-radius: 4px;
height: calc(450px - 14px);
overflow-y: auto;
}
.envName {
font-size: 19px;
font-weight: bold;
display:
flex;
justify-content: center;
margin-top: 8px
}
</style>
我想让子组件为isExecuting为true的时候，当前执行的环境的操作按钮可点击，其它的置灰。给我详细的代码，不要省略任何一条
本文介绍了一个具体的Ant构建文件(build.xml)配置案例。该案例展示了如何设置项目的根目录、默认目标、名称等基本属性，并包含了Flex编译任务、国际化资源定位、服务配置文件指定等高级配置。
扫一扫
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
