南宁网宿科技
252 lines
8.0 KiB
Vue
252 lines
8.0 KiB
Vue
<!-- 用户编辑弹窗 -->
|
|
<template>
|
|
<ele-modal
|
|
width="75%"
|
|
:visible="visible"
|
|
:confirm-loading="loading"
|
|
:maxable="maxAble"
|
|
:title="'服务器详情'"
|
|
:body-style="{ paddingBottom: '36px' }"
|
|
@update:visible="updateVisible"
|
|
:footer="null"
|
|
>
|
|
<a-form
|
|
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
|
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
|
|
>
|
|
<div class="base-form" style="margin-bottom: 20px">
|
|
<a-descriptions :title="assets.name" bordered>
|
|
<a-descriptions-item label="客户名称">
|
|
{{ assets.companyName }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="服务器名称">
|
|
{{ assets.name }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="状态">
|
|
<a-tag v-if="assets.status === '0'" color="green">正常</a-tag>
|
|
<a-tag v-if="assets.status === '1'" color="red">过期</a-tag>
|
|
<a-tag v-if="assets.status === '2'" color="purple">不再续</a-tag>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="服务器IP">
|
|
{{ assets.code }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="宝塔面板">
|
|
<a href="#" @click="openUrl(assets)">{{ assets.panel }}</a>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="宝塔账号">
|
|
{{ assets.panelAccount }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="宝塔密码">
|
|
<span v-role="['admin']">{{ assets.panelPassword }}</span>
|
|
<span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
|
|
>****</span
|
|
>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="品牌厂商">
|
|
{{ assets.brand }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="服务器配置">
|
|
{{ assets.configuration }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="开发端口">
|
|
{{ assets.openPort }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="有效期">
|
|
<div v-if="assets.startTime && assets.endTime">
|
|
<div class="ele-text-info">{{ assets.startTime }}</div>
|
|
<div v-html="getEndTime(assets.endTime)"></div>
|
|
</div>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="服务器账号">
|
|
<span class="ele-text-danger">root</span>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="服务器密码">
|
|
<span class="ele-text-danger" v-role="['admin']">{{
|
|
assets.password
|
|
}}</span>
|
|
<span v-any-role="['user', 'guest', 'superAdmin', 'developer']"
|
|
>****</span
|
|
>
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="创建时间">
|
|
{{ timeAgo(assets.createTime) }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="排序">
|
|
{{ assets.sortNumber }}
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<div class="base-form" style="margin-bottom: 20px">
|
|
<a-descriptions title="服务器状态" bordered v-if="assets.systemTotal">
|
|
<a-descriptions-item label="操作系统信息">
|
|
{{ assets.systemTotal.system }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="面板版本">
|
|
{{ assets.systemTotal.version }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="已不间断运行">
|
|
{{ assets.systemTotal.time }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="CPU 核心数">
|
|
{{ assets.systemTotal.cpuNum }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="负载状态">
|
|
{{ assets.systemTotal.cpuRealUsed }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="物理内存容量(MB)">
|
|
{{ assets.systemTotal.memTotal }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="已使用的物理内存(MB)">
|
|
{{ assets.systemTotal.memRealUsed }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="可用的物理内存(MB)">
|
|
{{ assets.systemTotal.memFree }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="缓存化的内存(MB)">
|
|
{{ assets.systemTotal.memCached }}
|
|
</a-descriptions-item>
|
|
<a-descriptions-item label="系统缓冲 (MB)">
|
|
{{ assets.systemTotal.memBuffers }}
|
|
</a-descriptions-item>
|
|
</a-descriptions>
|
|
</div>
|
|
<!-- <a-space v-if="assets.systemTotal">-->
|
|
<!-- <div class="base-form" style="margin-bottom: 20px">-->
|
|
<!-- <a-tabs v-model:activeKey="activeKey">-->
|
|
<!-- <a-tab-pane key="1" tab="系统信息" force-render>-->
|
|
<!-- <!– <byte-md-viewer :value="assets.comments" :plugins="plugins" />–>-->
|
|
|
|
<!-- </a-tab-pane>-->
|
|
<!-- </a-tabs>-->
|
|
<!-- </div>-->
|
|
<!-- </a-space>-->
|
|
</a-form>
|
|
</ele-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getEndTime } from '@/utils/common';
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { Form } from 'ant-design-vue';
|
|
import { assignObject, timeAgo } from 'ele-admin-pro';
|
|
import type { Assets } from '@/api/oa/assets/model';
|
|
import { getAssets } from '@/api/oa/assets';
|
|
|
|
import 'bytemd/dist/index.min.css';
|
|
import 'github-markdown-css/github-markdown-light.css';
|
|
// // 链接、删除线、复选框、表格等的插件
|
|
import gfm from '@bytemd/plugin-gfm';
|
|
// // 插件的中文语言文件
|
|
import zh_HansGfm from '@bytemd/plugin-gfm/locales/zh_Hans.json';
|
|
// 中文语言文件
|
|
import 'bytemd/dist/index.min.css';
|
|
import highlight from '@bytemd/plugin-highlight-ssr';
|
|
import 'highlight.js/styles/default.css';
|
|
|
|
const useForm = Form.useForm;
|
|
|
|
const props = defineProps<{
|
|
// 弹窗是否打开
|
|
visible: boolean;
|
|
// 修改回显的数据
|
|
data?: Assets | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'done'): void;
|
|
(e: 'update:visible', visible: boolean): void;
|
|
}>();
|
|
|
|
// 插件
|
|
const plugins = ref([
|
|
gfm({
|
|
locale: zh_HansGfm
|
|
}),
|
|
highlight()
|
|
]);
|
|
|
|
// 用户信息
|
|
const assets = reactive<Assets>({
|
|
code: '',
|
|
createTime: '',
|
|
startTime: '',
|
|
endTime: '',
|
|
name: '',
|
|
brand: undefined,
|
|
account: '',
|
|
password: '',
|
|
configuration: '',
|
|
panelAccount: '',
|
|
panelPassword: '',
|
|
panel: '',
|
|
financeAmount: 0,
|
|
financeYears: 0,
|
|
financeRenew: 0,
|
|
financeCustomerName: '',
|
|
financeCustomerContact: '',
|
|
financeCustomerPhone: '',
|
|
brandAccount: '',
|
|
brandPassword: '',
|
|
openPort: '',
|
|
comments: '',
|
|
root: 'root',
|
|
userId: 0,
|
|
companyName: '',
|
|
nickname: '',
|
|
sortNumber: undefined,
|
|
status: undefined,
|
|
type: '',
|
|
assetsId: 0
|
|
});
|
|
|
|
// 请求状态
|
|
const loading = ref(true);
|
|
// 是否显示最大化切换按钮
|
|
const maxAble = ref(true);
|
|
// 选项卡位置
|
|
const activeKey = ref('1');
|
|
const { resetFields } = useForm(assets);
|
|
const users = ref<[]>([]);
|
|
|
|
/* 更新visible */
|
|
const updateVisible = (value: boolean) => {
|
|
emit('update:visible', value);
|
|
};
|
|
|
|
/* 打开外部链接 */
|
|
const openUrl = (record) => {
|
|
window.open(record.panel);
|
|
};
|
|
|
|
const query = () => {
|
|
const assetsId = Number(props.data?.assetsId);
|
|
getAssets(assetsId).then((res) => {
|
|
console.log(res);
|
|
assets.systemTotal = JSON.parse(res.systemTotal);
|
|
});
|
|
};
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(visible) => {
|
|
if (visible) {
|
|
if (props.data) {
|
|
loading.value = false;
|
|
assignObject(assets, props.data);
|
|
query();
|
|
}
|
|
} else {
|
|
resetFields();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
<style lang="less">
|
|
.tab-pane {
|
|
min-height: 100px;
|
|
}
|
|
.important {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|