313 lines
7.2 KiB
Vue
313 lines
7.2 KiB
Vue
<template>
|
||
<div class="managed-services-page">
|
||
<div class="page-toolbar">
|
||
<p class="page-desc">
|
||
统一管理两个 Docker 子服务：RTSP、容器状态与子项目结构化结果摘要。
|
||
</p>
|
||
<el-button type="primary" @click="loadServices" :loading="loading">
|
||
刷新
|
||
</el-button>
|
||
</div>
|
||
|
||
<el-row v-loading="loading" :gutter="20">
|
||
<el-col
|
||
v-for="service in services"
|
||
:key="service.id"
|
||
:xs="24"
|
||
:md="12"
|
||
:xl="8"
|
||
>
|
||
<el-card class="service-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<div>
|
||
<div class="service-name">{{ service.display_name }}</div>
|
||
<div class="service-type">{{ service.project_type }}</div>
|
||
</div>
|
||
<el-tag :type="statusType(service.status)">
|
||
{{ statusText(service.status) }}
|
||
</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="service-section">
|
||
<span class="section-label">RTSP</span>
|
||
<div class="rtsp-value">
|
||
{{ service.rtsp || service.config_error || "-" }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="service-section">
|
||
<span class="section-label">最近结果</span>
|
||
<div>{{ formatTime(service.summary?.last_result_time) }}</div>
|
||
</div>
|
||
|
||
<div class="service-section">
|
||
<span class="section-label">摘要</span>
|
||
<div class="summary-text">
|
||
{{
|
||
service.summary?.headline ||
|
||
service.result_error ||
|
||
"暂无摘要"
|
||
}}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-if="
|
||
service.config_error ||
|
||
service.service_error ||
|
||
service.result_error
|
||
"
|
||
class="service-errors"
|
||
>
|
||
<el-tag v-if="service.config_error" type="warning">
|
||
配置异常
|
||
</el-tag>
|
||
<el-tag v-if="service.service_error" type="danger">
|
||
服务状态异常
|
||
</el-tag>
|
||
<el-tag v-if="service.result_error" type="info">
|
||
结果读取异常
|
||
</el-tag>
|
||
</div>
|
||
|
||
<div class="service-actions">
|
||
<el-button @click="openEdit(service)">编辑 RTSP</el-button>
|
||
<el-button
|
||
type="warning"
|
||
@click="handleRestart(service)"
|
||
:loading="restartTarget === service.id"
|
||
>
|
||
重启容器
|
||
</el-button>
|
||
<el-button type="primary" @click="goDetail(service)">
|
||
查看详情
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-empty
|
||
v-if="!loading && services.length === 0"
|
||
description="暂无被管理服务"
|
||
/>
|
||
|
||
<el-dialog v-model="editVisible" width="680px" title="编辑 RTSP">
|
||
<el-form label-width="100px">
|
||
<el-form-item label="服务">
|
||
<span>{{ editForm.display_name }}</span>
|
||
</el-form-item>
|
||
<el-form-item label="RTSP">
|
||
<el-input
|
||
v-model="editForm.rtsp"
|
||
type="textarea"
|
||
:rows="3"
|
||
placeholder="rtsp://user:password@host:554/stream"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="editVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="saveConfig(false)" :loading="saving">
|
||
保存
|
||
</el-button>
|
||
<el-button type="warning" @click="saveConfig(true)" :loading="saving">
|
||
保存并重启
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref } from "vue";
|
||
import { useRouter } from "vue-router";
|
||
import { ElMessage } from "element-plus";
|
||
import {
|
||
getManagedServices,
|
||
restartManagedService,
|
||
updateManagedServiceConfig,
|
||
} from "@/api";
|
||
|
||
const router = useRouter();
|
||
|
||
const services = ref([]);
|
||
const loading = ref(false);
|
||
const saving = ref(false);
|
||
const restartTarget = ref("");
|
||
const editVisible = ref(false);
|
||
const editForm = ref({
|
||
id: "",
|
||
display_name: "",
|
||
rtsp: "",
|
||
});
|
||
|
||
const loadServices = async () => {
|
||
loading.value = true;
|
||
try {
|
||
const res = await getManagedServices();
|
||
services.value = res.services || [];
|
||
} catch (error) {
|
||
ElMessage.error(error.message || "加载被管理服务失败");
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
};
|
||
|
||
const openEdit = (service) => {
|
||
editForm.value = {
|
||
id: service.id,
|
||
display_name: service.display_name,
|
||
rtsp: service.rtsp || "",
|
||
};
|
||
editVisible.value = true;
|
||
};
|
||
|
||
const saveConfig = async (restartAfter) => {
|
||
if (!editForm.value.id) {
|
||
return;
|
||
}
|
||
|
||
saving.value = true;
|
||
try {
|
||
await updateManagedServiceConfig(editForm.value.id, {
|
||
rtsp_url: editForm.value.rtsp,
|
||
});
|
||
if (restartAfter) {
|
||
await restartManagedService(editForm.value.id);
|
||
}
|
||
ElMessage.success(restartAfter ? "配置已保存并重启容器" : "配置已保存");
|
||
editVisible.value = false;
|
||
await loadServices();
|
||
} catch (error) {
|
||
ElMessage.error(error.message || "保存配置失败");
|
||
} finally {
|
||
saving.value = false;
|
||
}
|
||
};
|
||
|
||
const handleRestart = async (service) => {
|
||
restartTarget.value = service.id;
|
||
try {
|
||
await restartManagedService(service.id);
|
||
ElMessage.success("容器已重启");
|
||
await loadServices();
|
||
} catch (error) {
|
||
ElMessage.error(error.message || "重启服务失败");
|
||
} finally {
|
||
restartTarget.value = "";
|
||
}
|
||
};
|
||
|
||
const goDetail = (service) => {
|
||
router.push(`/managed-services/${service.id}`);
|
||
};
|
||
|
||
const statusType = (status) => {
|
||
const map = {
|
||
running: "success",
|
||
stopped: "info",
|
||
failed: "danger",
|
||
unknown: "warning",
|
||
};
|
||
return map[status] || "warning";
|
||
};
|
||
|
||
const statusText = (status) => {
|
||
const map = {
|
||
running: "运行中",
|
||
stopped: "已停止",
|
||
failed: "失败",
|
||
unknown: "未知",
|
||
};
|
||
return map[status] || status || "未知";
|
||
};
|
||
|
||
const formatTime = (value) => {
|
||
if (!value) {
|
||
return "-";
|
||
}
|
||
const date = new Date(value);
|
||
if (Number.isNaN(date.getTime())) {
|
||
return value;
|
||
}
|
||
return date.toLocaleString();
|
||
};
|
||
|
||
onMounted(loadServices);
|
||
</script>
|
||
|
||
<style scoped>
|
||
.managed-services-page {
|
||
width: 100%;
|
||
}
|
||
|
||
.page-toolbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
gap: 16px;
|
||
}
|
||
|
||
.page-desc {
|
||
margin: 0;
|
||
color: #606266;
|
||
}
|
||
|
||
.service-card {
|
||
margin-bottom: 20px;
|
||
min-height: 320px;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.service-name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.service-type {
|
||
margin-top: 4px;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.service-section {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.section-label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.rtsp-value,
|
||
.summary-text {
|
||
line-height: 1.6;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.service-errors {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.service-actions {
|
||
display: flex;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
</style>
|