tnbapp/src/views/devops/sys/SysUpdate.vue

<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>