优化页面显示
This commit is contained in:
parent
d4edf3393a
commit
a95d98f370
|
|
@ -1,106 +1,106 @@
|
|||
<template>
|
||||
<div class="dns-record-container">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>DNS 记录管理</span>
|
||||
<el-button type="primary" size="small" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加记录
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-container class="main-layout">
|
||||
<!-- 左侧服务器列表 -->
|
||||
<el-aside width="250px" class="server-aside">
|
||||
<el-card class="server-card">
|
||||
<template #header>
|
||||
<span>DNS 服务器</span>
|
||||
</template>
|
||||
<el-menu
|
||||
:default-active="selectedServerId ? selectedServerId.toString() : ''"
|
||||
class="server-menu"
|
||||
@select="handleServerSelect"
|
||||
>
|
||||
<el-menu-item v-for="server in serverList" :key="server.ID.toString()" :index="server.ID.toString()">
|
||||
<el-icon><ServerIcon /></el-icon>
|
||||
<template #title>{{ server.name }}</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-card>
|
||||
</el-aside>
|
||||
|
||||
<!-- 搜索筛选 -->
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="DNS服务器">
|
||||
<el-select v-model="searchForm.server_id" placeholder="请选择服务器" @change="handleServerChange">
|
||||
<el-option
|
||||
v-for="server in serverList"
|
||||
:key="server.ID"
|
||||
:label="server.name"
|
||||
:value="server.ID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="区域">
|
||||
<el-select v-model="searchForm.zone_id" placeholder="请选择区域">
|
||||
<el-option
|
||||
v-for="zone in filteredZoneList"
|
||||
:key="zone.ID"
|
||||
:label="zone.domain"
|
||||
:value="zone.ID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 右侧内容区 -->
|
||||
<el-main class="content-main">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ selectedServerName || '请选择服务器' }}</span>
|
||||
<el-button type="primary" size="small" @click="handleAdd" :disabled="!selectedZoneId">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加记录
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" :data="recordList" style="width: 100%">
|
||||
<el-table-column prop="server_name" label="服务器" width="150" />
|
||||
<el-table-column prop="zone_domain" label="区域" width="150" />
|
||||
<el-table-column prop="name" label="记录名称" width="120" />
|
||||
<el-table-column prop="type" label="记录类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getRecordTypeColor(row.type)">
|
||||
{{ getRecordTypeName(row.type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="记录值" show-overflow-tooltip />
|
||||
<el-table-column prop="ttl" label="TTL" width="80">
|
||||
<template #default="{ row }">
|
||||
{{ row.ttl }} 秒
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="priority" label="优先级" width="80" v-if="showPriority">
|
||||
<template #default="{ row }">
|
||||
{{ row.priority || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="weight" label="权重" width="80" v-if="showWeight">
|
||||
<template #default="{ row }">
|
||||
{{ row.weight || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="port" label="端口" width="80" v-if="showPort">
|
||||
<template #default="{ row }">
|
||||
{{ row.port || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="target" label="目标" width="150" v-if="showTarget">
|
||||
<template #default="{ row }">
|
||||
{{ row.target || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<!-- 区域选择 -->
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="区域">
|
||||
<el-select v-model="searchForm.zone_id" placeholder="请选择区域" @change="handleZoneChange">
|
||||
<el-option
|
||||
v-for="zone in filteredZoneList"
|
||||
:key="zone.ID"
|
||||
:label="zone.domain"
|
||||
:value="zone.ID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="recordList" style="width: 100%">
|
||||
<el-table-column prop="zone_domain" label="区域" width="150" />
|
||||
<el-table-column prop="name" label="记录名称" width="120" />
|
||||
<el-table-column prop="type" label="记录类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getRecordTypeColor(row.type)">
|
||||
{{ getRecordTypeName(row.type) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="记录值" show-overflow-tooltip />
|
||||
<el-table-column prop="ttl" label="TTL" width="80">
|
||||
<template #default="{ row }">
|
||||
{{ row.ttl }} 秒
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="priority" label="优先级" width="80" v-if="showPriority">
|
||||
<template #default="{ row }">
|
||||
{{ row.priority || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="weight" label="权重" width="80" v-if="showWeight">
|
||||
<template #default="{ row }">
|
||||
{{ row.weight || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="port" label="端口" width="80" v-if="showPort">
|
||||
<template #default="{ row }">
|
||||
{{ row.port || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="target" label="目标" width="150" v-if="showTarget">
|
||||
<template #default="{ row }">
|
||||
{{ row.target || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
|
||||
<el-form ref="recordFormRef" :model="recordForm" label-width="100px">
|
||||
<el-form-item label="DNS服务器" prop="server_id">
|
||||
<el-select v-model="formServerId" placeholder="请选择服务器" @change="handleFormServerChange">
|
||||
<el-option
|
||||
v-for="server in serverList"
|
||||
:key="server.ID"
|
||||
:label="server.name"
|
||||
:value="server.ID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="区域" prop="zone_id">
|
||||
<el-select v-model="recordForm.zone_id" placeholder="请选择区域">
|
||||
<el-option
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { Plus, Setting as ServerIcon } from '@element-plus/icons-vue'
|
||||
import {
|
||||
createDNSRecord,
|
||||
getDNSRecordList,
|
||||
|
|
@ -170,13 +170,14 @@ const loading = ref(false)
|
|||
const recordList = ref([])
|
||||
const serverList = ref([])
|
||||
const zoneList = ref([])
|
||||
const selectedServerId = ref(null)
|
||||
const selectedZoneId = ref(null)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const recordFormRef = ref()
|
||||
|
||||
// 搜索表单
|
||||
const searchForm = reactive({
|
||||
server_id: null,
|
||||
zone_id: null
|
||||
})
|
||||
|
||||
|
|
@ -194,9 +195,6 @@ const recordForm = reactive({
|
|||
target: ''
|
||||
})
|
||||
|
||||
// 临时存储服务器ID，用于前端展示
|
||||
const formServerId = ref(null)
|
||||
|
||||
// 记录类型选项
|
||||
const recordTypeOptions = [
|
||||
{ value: 1, label: 'A' },
|
||||
|
|
@ -209,20 +207,21 @@ const recordTypeOptions = [
|
|||
{ value: 33, label: 'SRV' }
|
||||
]
|
||||
|
||||
// 筛选后的区域列表
|
||||
// 当前选中的服务器名称
|
||||
const selectedServerName = computed(() => {
|
||||
const server = serverList.value.find(s => s.ID === selectedServerId.value)
|
||||
return server ? server.name : ''
|
||||
})
|
||||
|
||||
// 筛选后的区域列表（只显示选中服务器的区域）
|
||||
const filteredZoneList = computed(() => {
|
||||
if (!searchForm.server_id) {
|
||||
return zoneList.value
|
||||
}
|
||||
return zoneList.value.filter(zone => zone.server_id === searchForm.server_id)
|
||||
if (!selectedServerId.value) return []
|
||||
return zoneList.value.filter(zone => zone.server_id === selectedServerId.value)
|
||||
})
|
||||
|
||||
// 表单区域列表
|
||||
const formZoneList = computed(() => {
|
||||
if (!formServerId.value) {
|
||||
return []
|
||||
}
|
||||
return zoneList.value.filter(zone => zone.server_id === formServerId.value)
|
||||
return filteredZoneList.value
|
||||
})
|
||||
|
||||
// 根据记录类型显示不同的字段
|
||||
|
|
@ -269,28 +268,30 @@ const fetchZoneList = async () => {
|
|||
|
||||
// 获取记录列表
|
||||
const fetchRecordList = async () => {
|
||||
if (!searchForm.zone_id) {
|
||||
recordList.value = []
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
record_id: 0,
|
||||
zone_id: searchForm.zone_id || 0,
|
||||
zone_id: searchForm.zone_id,
|
||||
get_type: 0
|
||||
}
|
||||
|
||||
|
||||
const res = await getDNSRecordList(params)
|
||||
if (res.code === 0) {
|
||||
// 合并服务器和区域信息
|
||||
// 合并区域信息
|
||||
const records = res.data.map(record => {
|
||||
const zone = zoneList.value.find(z => z.ID === record.zone_id)
|
||||
const server = serverList.value.find(s => s.ID === (zone ? zone.server_id : null))
|
||||
return {
|
||||
...record,
|
||||
server_name: server ? server.name : '未知服务器',
|
||||
zone_domain: zone ? zone.domain : '未知区域'
|
||||
}
|
||||
})
|
||||
recordList.value = records
|
||||
|
||||
|
||||
// 确定需要显示的列
|
||||
showPriority.value = records.some(record => [15, 33].includes(record.type))
|
||||
showWeight.value = records.some(record => [33].includes(record.type))
|
||||
|
|
@ -304,22 +305,25 @@ const fetchRecordList = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 服务器选择变化
|
||||
const handleServerChange = () => {
|
||||
// 服务器选择
|
||||
const handleServerSelect = (index) => {
|
||||
selectedServerId.value = parseInt(index)
|
||||
searchForm.zone_id = null
|
||||
selectedZoneId.value = null
|
||||
recordList.value = []
|
||||
}
|
||||
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
// 区域选择变化
|
||||
const handleZoneChange = () => {
|
||||
selectedZoneId.value = searchForm.zone_id
|
||||
fetchRecordList()
|
||||
}
|
||||
|
||||
// 添加记录
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '添加 DNS 记录'
|
||||
// 重置表单，确保数字字段有默认值
|
||||
recordForm.record_id = null
|
||||
recordForm.zone_id = null
|
||||
recordForm.zone_id = searchForm.zone_id
|
||||
recordForm.name = ''
|
||||
recordForm.type = 1
|
||||
recordForm.value = ''
|
||||
|
|
@ -328,7 +332,6 @@ const handleAdd = () => {
|
|||
recordForm.weight = 0
|
||||
recordForm.port = 0
|
||||
recordForm.target = ''
|
||||
formServerId.value = null
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
|
|
@ -337,27 +340,14 @@ const handleEdit = (row) => {
|
|||
dialogTitle.value = '编辑 DNS 记录'
|
||||
Object.assign(recordForm, row)
|
||||
recordForm.record_id = row.ID
|
||||
|
||||
// 设置服务器ID
|
||||
const zone = zoneList.value.find(z => z.ID === row.zone_id)
|
||||
if (zone) {
|
||||
formServerId.value = zone.server_id
|
||||
}
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 表单服务器选择变化
|
||||
const handleFormServerChange = () => {
|
||||
recordForm.zone_id = null
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
await recordFormRef.value.validate()
|
||||
|
||||
|
||||
try {
|
||||
// 准备发送到接口的参数，只包含接口需要的字段
|
||||
const submitData = {
|
||||
zone_id: recordForm.zone_id,
|
||||
name: recordForm.name,
|
||||
|
|
@ -369,7 +359,7 @@ const handleSubmit = async () => {
|
|||
port: recordForm.port,
|
||||
target: recordForm.target
|
||||
}
|
||||
|
||||
|
||||
let res
|
||||
if (recordForm.record_id) {
|
||||
submitData.record_id = recordForm.record_id
|
||||
|
|
@ -377,7 +367,7 @@ const handleSubmit = async () => {
|
|||
} else {
|
||||
res = await createDNSRecord(submitData)
|
||||
}
|
||||
|
||||
|
||||
if (res.code === 0) {
|
||||
ElMessage.success(recordForm.record_id ? '更新成功' : '创建成功')
|
||||
dialogVisible.value = false
|
||||
|
|
@ -400,7 +390,7 @@ const handleDelete = async (row) => {
|
|||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const res = await deleteDNSRecord({ record_id: row.ID, del_type: 0 })
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('删除成功')
|
||||
|
|
@ -444,15 +434,39 @@ const getRecordTypeColor = (type) => {
|
|||
}
|
||||
|
||||
onMounted(() => {
|
||||
Promise.all([fetchServerList(), fetchZoneList()]).then(() => {
|
||||
fetchRecordList()
|
||||
})
|
||||
Promise.all([fetchServerList(), fetchZoneList()])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dns-record-container {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.server-aside {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.server-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.server-card :deep(.el-card__body) {
|
||||
padding: 0;
|
||||
height: calc(100% - 57px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.server-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,66 @@
|
|||
<template>
|
||||
<div class="dns-zone-container">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>DNS 区域管理</span>
|
||||
<el-button type="primary" size="small" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加区域
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-container class="main-layout">
|
||||
<!-- 左侧服务器列表 -->
|
||||
<el-aside width="250px" class="server-aside">
|
||||
<el-card class="server-card">
|
||||
<template #header>
|
||||
<span>DNS 服务器</span>
|
||||
</template>
|
||||
<el-menu
|
||||
:default-active="selectedServerId ? selectedServerId.toString() : ''"
|
||||
class="server-menu"
|
||||
@select="handleServerSelect"
|
||||
>
|
||||
<el-menu-item v-for="server in serverList" :key="server.ID.toString()" :index="server.ID.toString()">
|
||||
<el-icon><ServerIcon /></el-icon>
|
||||
<template #title>{{ server.name }}</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-card>
|
||||
</el-aside>
|
||||
|
||||
<el-table v-loading="loading" :data="zoneList" style="width: 100%">
|
||||
<el-table-column prop="domain" label="域名" width="200" />
|
||||
<el-table-column prop="server_name" label="所属服务器" width="180" />
|
||||
<el-table-column prop="soa_mname" label="主域名服务器" width="180" />
|
||||
<el-table-column prop="soa_rname" label="管理员邮箱" width="180" />
|
||||
<el-table-column prop="ttl" label="默认TTL" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ row.ttl }} 秒
|
||||
<!-- 右侧内容区 -->
|
||||
<el-main class="content-main">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ selectedServerName || '请选择服务器' }}</span>
|
||||
<el-button type="primary" size="small" @click="handleAdd" :disabled="!selectedServerId">
|
||||
<el-icon><Plus /></el-icon>
|
||||
添加区域
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-table v-loading="loading" :data="filteredZoneList" style="width: 100%">
|
||||
<el-table-column prop="domain" label="域名" width="200" />
|
||||
<el-table-column prop="soa_mname" label="主域名服务器" width="180" />
|
||||
<el-table-column prop="soa_rname" label="管理员邮箱" width="180" />
|
||||
<el-table-column prop="ttl" label="默认TTL" width="100">
|
||||
<template #default="{ row }">
|
||||
{{ row.ttl }} 秒
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button link type="primary" size="small" @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button link type="danger" size="small" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
|
||||
<el-form ref="zoneFormRef" :model="zoneForm" label-width="120px">
|
||||
<el-form-item label="DNS服务器" prop="server_id">
|
||||
<el-select v-model="zoneForm.server_id" placeholder="请选择DNS服务器" style="width: 100%">
|
||||
<el-option
|
||||
v-for="server in serverList"
|
||||
:key="server.ID"
|
||||
:label="server.name"
|
||||
:value="server.ID"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="域名" prop="domain">
|
||||
<el-input v-model="zoneForm.domain" placeholder="请输入域名，如 example.com" />
|
||||
</el-form-item>
|
||||
|
|
@ -75,9 +88,9 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { Plus, Setting as ServerIcon } from '@element-plus/icons-vue'
|
||||
import {
|
||||
createDNSZone,
|
||||
getDNSZoneList,
|
||||
|
|
@ -89,6 +102,7 @@ import { getDNSServerList } from '@/api/dns.js'
|
|||
const loading = ref(false)
|
||||
const zoneList = ref([])
|
||||
const serverList = ref([])
|
||||
const selectedServerId = ref(null)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const zoneFormRef = ref()
|
||||
|
|
@ -107,6 +121,18 @@ const zoneForm = reactive({
|
|||
description: ''
|
||||
})
|
||||
|
||||
// 当前选中的服务器名称
|
||||
const selectedServerName = computed(() => {
|
||||
const server = serverList.value.find(s => s.ID === selectedServerId.value)
|
||||
return server ? server.name : ''
|
||||
})
|
||||
|
||||
// 过滤后的区域列表（只显示选中服务器的区域）
|
||||
const filteredZoneList = computed(() => {
|
||||
if (!selectedServerId.value) return []
|
||||
return zoneList.value.filter(zone => zone.server_id === selectedServerId.value)
|
||||
})
|
||||
|
||||
// 获取服务器列表
|
||||
const fetchServerList = async () => {
|
||||
try {
|
||||
|
|
@ -125,15 +151,7 @@ const fetchZoneList = async () => {
|
|||
try {
|
||||
const res = await getDNSZoneList({ zone_id: 0, get_type: 0 })
|
||||
if (res.code === 0) {
|
||||
// 合并服务器名称
|
||||
const zones = res.data.map(zone => {
|
||||
const server = serverList.value.find(s => s.ID === zone.server_id)
|
||||
return {
|
||||
...zone,
|
||||
server_name: server ? server.name : '未知服务器'
|
||||
}
|
||||
})
|
||||
zoneList.value = zones
|
||||
zoneList.value = res.data
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取区域列表失败')
|
||||
|
|
@ -142,6 +160,11 @@ const fetchZoneList = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 服务器选择
|
||||
const handleServerSelect = (index) => {
|
||||
selectedServerId.value = parseInt(index)
|
||||
}
|
||||
|
||||
// 添加区域
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '添加 DNS 区域'
|
||||
|
|
@ -152,6 +175,7 @@ const handleAdd = () => {
|
|||
zoneForm[key] = ''
|
||||
}
|
||||
})
|
||||
zoneForm.server_id = selectedServerId.value
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
|
|
@ -166,9 +190,8 @@ const handleEdit = (row) => {
|
|||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
await zoneFormRef.value.validate()
|
||||
|
||||
|
||||
try {
|
||||
// 准备发送到接口的参数，只包含接口需要的字段
|
||||
const submitData = {
|
||||
domain: zoneForm.domain,
|
||||
soa_mname: zoneForm.soa_mname,
|
||||
|
|
@ -181,7 +204,7 @@ const handleSubmit = async () => {
|
|||
ttl: zoneForm.ttl,
|
||||
description: zoneForm.description
|
||||
}
|
||||
|
||||
|
||||
let res
|
||||
if (zoneForm.zone_id) {
|
||||
submitData.zone_id = zoneForm.zone_id
|
||||
|
|
@ -190,7 +213,7 @@ const handleSubmit = async () => {
|
|||
submitData.server_id = zoneForm.server_id
|
||||
res = await createDNSZone(submitData)
|
||||
}
|
||||
|
||||
|
||||
if (res.code === 0) {
|
||||
ElMessage.success(zoneForm.zone_id ? '更新成功' : '创建成功')
|
||||
dialogVisible.value = false
|
||||
|
|
@ -213,7 +236,7 @@ const handleDelete = async (row) => {
|
|||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const res = await deleteDNSZone({ zone_id: row.ID, del_type: 0 })
|
||||
if (res.code === 0) {
|
||||
ElMessage.success('删除成功')
|
||||
|
|
@ -235,7 +258,33 @@ onMounted(() => {
|
|||
|
||||
<style scoped>
|
||||
.dns-zone-container {
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.server-aside {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.server-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.server-card :deep(.el-card__body) {
|
||||
padding: 0;
|
||||
height: calc(100% - 57px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.server-menu {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.content-main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
|
|
|||
|
|
@ -1,68 +1,145 @@
|
|||
<template>
|
||||
<div>
|
||||
<img ref="imagePlayer" alt="实时图像" width="100%" height="100%"/>
|
||||
<div class="video-container">
|
||||
<div v-if="loading" class="status-tip">连接中...</div>
|
||||
<div v-else-if="error" class="status-tip error">{{ error }}</div>
|
||||
<img
|
||||
v-else
|
||||
ref="imagePlayer"
|
||||
alt="实时图像"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DeviceRealVPV2",
|
||||
data() {
|
||||
return {
|
||||
imagePlayer: null,
|
||||
socket: null,
|
||||
device_id: localStorage.getItem("realvp_device_id"),
|
||||
tokenData: {
|
||||
token: localStorage.getItem("token"),
|
||||
ip: localStorage.getItem("ip"),
|
||||
userId: localStorage.getItem("userId"),
|
||||
username: localStorage.getItem("username"),
|
||||
to_user_id: this.to_user_id,
|
||||
},
|
||||
device_id: "",
|
||||
token: "",
|
||||
loading: true,
|
||||
error: "",
|
||||
reconnectTimer: null,
|
||||
reconnectCount: 0,
|
||||
maxReconnectAttempts: 10,
|
||||
currentObjectURL: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.imagePlayer = this.$refs.imagePlayer;
|
||||
this.loadFromStorage();
|
||||
this.initWebSocket();
|
||||
},
|
||||
methods: {
|
||||
loadFromStorage() {
|
||||
try {
|
||||
this.device_id = localStorage.getItem("realvp_device_id") || "";
|
||||
this.token = localStorage.getItem("token") || "";
|
||||
} catch (e) {
|
||||
console.warn("读取 localStorage 失败:", e);
|
||||
}
|
||||
},
|
||||
initWebSocket() {
|
||||
let socketUrl =
|
||||
"wss://gep.ljsea.top/device/get_real_time_image?device_id=" + //wss://gep.ljsea.top/device/get_real_time_image?device_id= wss://vps.ljsea.top/tool/video_real_time?device_id=
|
||||
this.device_id +
|
||||
"&token=" +
|
||||
this.tokenData.token;
|
||||
if (!this.device_id || !this.token) {
|
||||
this.error = "缺少设备ID或认证信息";
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
const socketUrl = `wss://gep.ljsea.top/device/get_real_time_image?device_id=${this.device_id}&token=${this.token}`;
|
||||
this.socket = new WebSocket(socketUrl);
|
||||
this.socket.onopen = () => {
|
||||
console.log('WebSocket连接成功');
|
||||
};
|
||||
this.socket.onmessage = (event) => {
|
||||
const blob = new Blob([event.data], { type: 'image/jpeg' });
|
||||
const objectURL = URL.createObjectURL(blob);
|
||||
this.imagePlayer.src = objectURL;
|
||||
};
|
||||
this.socket.onclose = () => {
|
||||
console.log('WebSocket连接关闭');
|
||||
this.socket.onopen = this.handleOpen;
|
||||
this.socket.onmessage = this.handleMessage;
|
||||
this.socket.onclose = this.handleClose;
|
||||
this.socket.onerror = this.handleError;
|
||||
},
|
||||
handleOpen() {
|
||||
console.log("WebSocket连接成功");
|
||||
this.loading = false;
|
||||
this.error = "";
|
||||
this.reconnectCount = 0;
|
||||
},
|
||||
handleMessage(event) {
|
||||
this.revokeCurrentURL();
|
||||
const blob = new Blob([event.data], { type: "image/jpeg" });
|
||||
this.currentObjectURL = URL.createObjectURL(blob);
|
||||
this.imagePlayer.src = this.currentObjectURL;
|
||||
},
|
||||
handleClose() {
|
||||
console.log("WebSocket连接关闭");
|
||||
this.revokeCurrentURL();
|
||||
if (this.imagePlayer) {
|
||||
this.imagePlayer.src = "";
|
||||
};
|
||||
this.socket.onerror = (error) => {
|
||||
console.error('WebSocket出现错误:', error);
|
||||
};
|
||||
}
|
||||
this.scheduleReconnect();
|
||||
},
|
||||
handleError(error) {
|
||||
console.error("WebSocket出现错误:", error);
|
||||
this.error = "连接出错，请检查网络";
|
||||
this.loading = false;
|
||||
},
|
||||
scheduleReconnect() {
|
||||
if (this.reconnectCount >= this.maxReconnectAttempts) {
|
||||
this.error = "连接已断开，重连次数达到上限";
|
||||
return;
|
||||
}
|
||||
this.reconnectCount++;
|
||||
const delay = Math.min(1000 * Math.pow(2, this.reconnectCount - 1), 10000);
|
||||
console.log(`尝试第 ${this.reconnectCount} 次重连，${delay}ms 后...`);
|
||||
this.reconnectTimer = setTimeout(() => {
|
||||
this.initWebSocket();
|
||||
}, delay);
|
||||
},
|
||||
revokeCurrentURL() {
|
||||
if (this.currentObjectURL) {
|
||||
URL.revokeObjectURL(this.currentObjectURL);
|
||||
this.currentObjectURL = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.socket) {
|
||||
this.socket.onmessage = null;
|
||||
console.log('关闭WebSocket连接');
|
||||
this.socket.close();
|
||||
window.location.reload();
|
||||
if (this.reconnectTimer) {
|
||||
clearTimeout(this.reconnectTimer);
|
||||
this.reconnectTimer = null;
|
||||
}
|
||||
if (this.socket) {
|
||||
this.socket.onopen = null;
|
||||
this.socket.onmessage = null;
|
||||
this.socket.onclose = null;
|
||||
this.socket.onerror = null;
|
||||
this.socket.close();
|
||||
this.socket = null;
|
||||
}
|
||||
this.revokeCurrentURL();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.video-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
.status-tip {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.status-tip.error {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,103 +1,72 @@
|
|||
<template>
|
||||
<div class="video_wrap">
|
||||
<video
|
||||
width="100%"
|
||||
height="100%"
|
||||
ref="videoPlayer"
|
||||
muted="muted"
|
||||
class="video-js video"
|
||||
></video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onUnmounted, ref, nextTick } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { onMounted, onUnmounted, ref } from "vue";
|
||||
import videojs from "video.js";
|
||||
import "video.js/dist/video-js.css";
|
||||
|
||||
const videoPlayer = ref(null);
|
||||
const myPlayer = ref(null);
|
||||
|
||||
const playVideoA = () => {
|
||||
nextTick(() => {
|
||||
myPlayer.value = videojs(videoPlayer.value, {
|
||||
// poster: "//vjs.zencdn.net/v/oceans.png",//视频封面照片
|
||||
controls: true, //视频控件
|
||||
autoplay: true, //自动播放
|
||||
sources: [
|
||||
{
|
||||
src:
|
||||
"https://gep.ljsea.top/video/mp4?filename=" +
|
||||
localStorage.getItem("video_name") +
|
||||
"&id=" +
|
||||
localStorage.getItem("video_id") +
|
||||
"&ip=" +
|
||||
localStorage.getItem("ip")+
|
||||
"&userId=" +
|
||||
localStorage.getItem("userId") +
|
||||
"&token=" +
|
||||
localStorage.getItem("token"), //视频地址
|
||||
type: localStorage.getItem("video_name").split('.')[1]==="m3u8" ?"application/vnd.apple.mpegurl":"video/mp4",
|
||||
},
|
||||
],
|
||||
controlBar: {
|
||||
remainingTimeDisplay: {
|
||||
displayNegative: false,
|
||||
}
|
||||
},
|
||||
playbackRates: [0.5, 1, 1.5, 2], //设置播放速度
|
||||
});
|
||||
});
|
||||
const getVideoConfig = () => {
|
||||
const videoName = localStorage.getItem("video_name") || "";
|
||||
const videoType = videoName.split('.').pop() === "m3u8"
|
||||
? "application/vnd.apple.mpegurl"
|
||||
: "video/mp4";
|
||||
|
||||
const videoSrc = new URL("https://gep.ljsea.top/video/mp4");
|
||||
videoSrc.searchParams.set("filename", videoName);
|
||||
videoSrc.searchParams.set("id", localStorage.getItem("video_id") || "");
|
||||
videoSrc.searchParams.set("ip", localStorage.getItem("ip") || "");
|
||||
videoSrc.searchParams.set("userId", localStorage.getItem("userId") || "");
|
||||
videoSrc.searchParams.set("token", localStorage.getItem("token") || "");
|
||||
|
||||
return {
|
||||
controls: true,
|
||||
autoplay: true,
|
||||
sources: [{ src: videoSrc.toString(), type: videoType }],
|
||||
controlBar: {
|
||||
remainingTimeDisplay: { displayNegative: false }
|
||||
},
|
||||
playbackRates: [0.5, 1, 1.5, 2],
|
||||
};
|
||||
};
|
||||
|
||||
const initPlayer = () => {
|
||||
myPlayer.value = videojs(videoPlayer.value, getVideoConfig());
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
playVideoA();
|
||||
initPlayer();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (myPlayer.value) {
|
||||
myPlayer.value.dispose();
|
||||
myPlayer.value = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video_wrap {
|
||||
width: "80%";
|
||||
height: "80%";
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
position: relative;
|
||||
|
||||
.backIndex {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
line-height: 50px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 99;
|
||||
padding-left: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep(.vjs-big-play-button) {
|
||||
:deep(.vjs-big-play-button) {
|
||||
margin-left: 45%;
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue