|
|
@@ -0,0 +1,287 @@
|
|
|
+<template>
|
|
|
+ <el-container>
|
|
|
+ <el-header height="220">
|
|
|
+ <h3>系统更新</h3>
|
|
|
+ </el-header>
|
|
|
+ <el-main>
|
|
|
+ <el-row>
|
|
|
+ <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>devops-mgr</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">添加</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-table
|
|
|
+ :data="mgrList"
|
|
|
+ border
|
|
|
+ height="480"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="machineIpv4"
|
|
|
+ label="机器地址"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="bootTime"
|
|
|
+ label="应用目录"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="status"
|
|
|
+ label="当前状态"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.status === 'Online'" :type="'success'" disable-transitions>
|
|
|
+ <span>在线</span>
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.status === 'Offline'" :type="'danger'" disable-transitions>
|
|
|
+ <span>离线</span>
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else :type="'warning'" disable-transitions>
|
|
|
+ <span>弃用</span>
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="agentVersion"
|
|
|
+ label="Agent 版本"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>devops-agent</span>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="getData">刷新</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="text item">
|
|
|
+ <el-table
|
|
|
+ :data="agentList"
|
|
|
+ border
|
|
|
+ height="480"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="machineIpv4"
|
|
|
+ label="机器地址"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="bootTime"
|
|
|
+ label="启动时间"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="status"
|
|
|
+ label="当前状态"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.status === 'Online'" :type="'success'" disable-transitions>
|
|
|
+ <span>在线</span>
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.status === 'Offline'" :type="'danger'" disable-transitions>
|
|
|
+ <span>离线</span>
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else :type="'warning'" disable-transitions>
|
|
|
+ <span>弃用</span>
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="agentVersion"
|
|
|
+ label="Agent 版本"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="env"
|
|
|
+ label="所属环境"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showMgrDialog"
|
|
|
+ width="50%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-button style="float: right; padding: 3px 0" type="text" @click="handleAdd">添加</el-button>
|
|
|
+ <el-table
|
|
|
+ :data="mgrList"
|
|
|
+ border
|
|
|
+ height="480"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="machineIpv4"
|
|
|
+ label="机器地址"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="bootTime"
|
|
|
+ label="启动时间"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="status"
|
|
|
+ label="当前状态"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag v-if="scope.row.status === 'Online'" :type="'success'" disable-transitions>
|
|
|
+ <span>在线</span>
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="scope.row.status === 'Offline'" :type="'danger'" disable-transitions>
|
|
|
+ <span>离线</span>
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else :type="'warning'" disable-transitions>
|
|
|
+ <span>弃用</span>
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="agentVersion"
|
|
|
+ label="Agent 版本"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="env"
|
|
|
+ label="所属环境"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showAddDialog"
|
|
|
+ width="50%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <el-form :model="addForm" label-width="80px">
|
|
|
+ <el-form-item label="主机地址">
|
|
|
+ <el-input v-model="addForm.host" style="width: 70%; padding-right: 2px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="SSH 端口">
|
|
|
+ <el-input v-model="addForm.port" style="width: 70%; padding-right: 2px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="认证方式" style="width: 70%; padding-right: 2px">
|
|
|
+ <el-select v-model="addForm.authType" placeholder="选择认证方式">
|
|
|
+ <el-option label="密码认证" value="password" />
|
|
|
+ <el-option label="私钥认证" value="privateKey" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <div v-if="addForm.authType === 'password'">
|
|
|
+ <el-form-item label="用户名" style="width: 70%; padding-right: 2px">
|
|
|
+ <el-input v-model="addForm.username" style="width: 70%; padding-right: 2px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码" style="width: 70%; padding-right: 2px">
|
|
|
+ <el-input v-model="addForm.password" style="width: 70%; padding-right: 2px" />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-form-item label="私钥" style="width: 70%; padding-right: 2px">
|
|
|
+ <el-input
|
|
|
+ v-model="addForm.rsaPrikey"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="10000"
|
|
|
+ :rows="10"
|
|
|
+ style="padding: 5px"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="应用目录">
|
|
|
+ <el-input v-model="addForm.appDir" style="width: 70%; padding-right: 2px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="onAdd">确定</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 视频预览对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ title="预览视频"
|
|
|
+ append-to-body
|
|
|
+ :visible.sync="showPreviewDialog"
|
|
|
+ width="70%"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <template />
|
|
|
+ </el-dialog>
|
|
|
+ </el-container>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'SysUpdate',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryInfo: {
|
|
|
+ scope: null,
|
|
|
+ pn: 1
|
|
|
+ },
|
|
|
+ // 屏幕宽度, 为了控制分页条的大小
|
|
|
+ screenWidth: document.body.clientWidth,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalSize: 0,
|
|
|
+ dataList: [],
|
|
|
+ nextId: 0,
|
|
|
+ // **********************************************************************
|
|
|
+ mgrList: [],
|
|
|
+ agentList: [],
|
|
|
+ // **********************************************************************
|
|
|
+ showAddDialog: false,
|
|
|
+ addForm: {
|
|
|
+ host: '',
|
|
|
+ port: 22,
|
|
|
+ authType: 'password',
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ rsaPrikey: '',
|
|
|
+ appDir: ''
|
|
|
+ },
|
|
|
+ // **********************************************************************
|
|
|
+ showPreviewDialog: false,
|
|
|
+ form: {
|
|
|
+ videoId: null,
|
|
|
+ scope: 1
|
|
|
+ },
|
|
|
+ videoResources: [],
|
|
|
+ publishVideoDiaglog: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ document.title = '系统更新'
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.dataList = []
|
|
|
+ },
|
|
|
+ onRefresh() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.showAddDialog = true
|
|
|
+ },
|
|
|
+ onAdd() {
|
|
|
+ this.showAddDialog = false
|
|
|
+ },
|
|
|
+ handlePreview(index, row) {
|
|
|
+ },
|
|
|
+ handleEdit(index, row) {
|
|
|
+ const path = '/post/video/edit/' + row.videoId
|
|
|
+ this.$router.push(path)
|
|
|
+ },
|
|
|
+ onSelectChange() {
|
|
|
+ this.$message.info(this.queryInfo)
|
|
|
+ },
|
|
|
+ handleClose() {
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|
