Initial commit
This commit is contained in:
南宁网宿科技
@@ -0,0 +1,251 @@
|
||||
<!-- 用户编辑弹窗 -->
|
||||
<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>
|
||||
Reference in New Issue
Block a user