添加了列表页和详情页

config/dev.env.js

 module.exports = {
   NODE_ENV: '"development"',
   ENV_CONFIG: '"dev"',
-  QA_API: '"http://172.30.220.22:3003"',
+  // QA_API: '"http://172.30.220.22:3003"',
+  QA_API: '"http://127.0.0.1:3003"',
   TESTDATA_API: '"http://172.30.220.22:3333"'
 }

src/api/docker.js

+import request from '@/utils/request'
+
+export function fetchKubernetesList() {
+  return request({
+    url: '/k8s/namespace',
+    method: 'get'
+  })
+}
+
+export function fetchK8sdetail(query) {
+  return request({
+    url: '/k8s/service',
+    method: 'get',
+    params: query
+  })
+}
+
+export function fetchUserrepository(data) {
+  return request({
+    url: '/k8s/repository',
+    method: 'post',
+    data
+  })
+}
+
+export function fetchTaglist(data) {
+  return request({
+    url: '/k8s/tag',
+    method: 'post',
+    data
+  })
+}
+export function getType() {
+  return request({
+    url: '/proconfig/get_type',
+    method: 'get'
+  })
+}
+export function CreateCluService(data) {
+  return request({
+    url: '/k8s/service/create',
+    method: 'post',
+    data
+  })
+}
+export function fetchServiceDetails(data) {
+  return request({
+    url: '/k8s/service/details',
+    method: 'post',
+    data
+  })
+}

src/components/JsonEditor/index.vue

@@ -9,6 +9,7 @@ import CodeMirror from 'codemirror'
 import 'codemirror/addon/lint/lint.css'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/rubyblue.css'
+
 require('script-loader!jsonlint')
 import 'codemirror/mode/javascript/javascript'
 import 'codemirror/addon/lint/lint'
@@ -55,18 +56,21 @@ export default {
 </script>
 
 <style scoped>
-.json-editor{
-  height: 100%;
-  position: relative;
-}
-.json-editor >>> .CodeMirror {
-  height: auto;
-  min-height: 300px;
-}
-.json-editor >>> .CodeMirror-scroll{
-  min-height: 300px;
-}
-.json-editor >>> .cm-s-rubyblue span.cm-string {
-  color: #F08047;
-}
+  .json-editor {
+    height: 100%;
+    position: relative;
+  }
+
+  .json-editor >>> .CodeMirror {
+    height: 400px;
+    min-height: 300px;
+  }
+
+  .json-editor >>> .CodeMirror-scroll {
+    min-height: 300px;
+  }
+
+  .json-editor >>> .cm-s-rubyblue span.cm-string {
+    color: #F08047;
+  }
 </style>

src/lang/zh.js

 export default {
   route: {
     indexList: '导航页面列表',
-    runEnv: '运行中环境',
-
+    runingEnv: '运行中环境',
+    hangUpEnv: '挂起的环境',
+    createEnv: '创建新环境',
+    envTemplate: '环境模板',
+    detail: '详细信息',
     dashboard: '首页',
     introduction: '简述',
     documentation: '文档',

src/router/index.js

@@ -9,6 +9,7 @@ import Layout from '@/views/layout/Layout'
 /* Router Modules */
 import componentsRouter from './modules/components'
 import chartsRouter from './modules/charts'
+import dockersRouter from './modules/docker'
 import tableRouter from './modules/table'
 import nestedRouter from './modules/nested'
 
@@ -119,7 +120,7 @@ export const constantRouterMap = [
 ]
 
 export default new Router({
-  // mode: 'history', // require service support
+  mode: 'history', // require service support
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRouterMap
 })
@@ -203,6 +204,7 @@ export const asyncRouterMap = [
   chartsRouter,
   nestedRouter,
   tableRouter,
+  dockersRouter,
 
   {
     path: '/example',

src/router/modules/docker.js

+
+import Layout from '@/views/layout/Layout'
+
+const dockersRouter = {
+  path: '/dockers',
+  component: Layout,
+  redirect: 'noredirect',
+  name: 'Dockers',
+  meta: {
+    title: 'dockers',
+    icon: 'chart'
+  },
+  children: [
+    {
+      path: 'runingEnv',
+      component: () => import('@/views/docker/runingEnv'),
+      name: 'RuningEnv',
+      meta: { title: 'runingEnv', noCache: true }
+    },
+    {
+      path: 'hangUpEnv',
+      component: () => import('@/views/docker/hangUpEnv'),
+      name: 'HangUpEnv',
+      meta: { title: 'hangUpEnv', noCache: true }
+    },
+    {
+      path: 'createEnv',
+      component: () => import('@/views/docker/createEnv'),
+      name: 'CreateEnv',
+      meta: { title: 'createEnv', noCache: true }
+    },
+    {
+      path: 'envTemplate',
+      component: () => import('@/views/docker/envTemplate'),
+      name: 'EnvTemplate',
+      meta: { title: 'envTemplate', noCache: true }
+    },
+    {
+      path: 'runingEnv/:name',
+      component: () => import('@/views/docker/envDetail'),
+      name: 'Detail',
+      meta: { title: 'detail', noCache: true },
+      hidden: true
+    }
+  ]
+}
+
+export default dockersRouter

src/styles/index.scss

@@ -199,3 +199,7 @@ code {
 .multiselect--active {
   z-index: 1000 !important;
 }
+.shadow-content{
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 30px;
+}

src/views/docker/envDetail.vue

+<template>
+  <div>
+    <div class="shadow-content">
+      <div class="warn-content">
+        <svg-icon icon-class="table" />
+        基础服务
+        <div style="float: right;min-width: 300px;overflow: hidden">
+          <el-button type="warning" size="mini" round @click="getRepository('base')">新增服务</el-button>
+          <el-button type="warning" size="mini" round>刷新状态</el-button>
+          <el-dropdown>
+            <el-button type="warning" size="mini" round>
+              更多操作
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>从线上同步DB</el-dropdown-item>
+              <el-dropdown-item>从线上同步MQ</el-dropdown-item>
+              <el-dropdown-item>清理Redis缓存</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+      <el-table
+        :data="FormatTabledata.base"
+        :header-cell-style="{background:'#F3F4F7',color:'#555'}"
+        size="medium"
+        align="center"
+        style="width: 100%">
+        <el-table-column
+          :index="indexMethod"
+          type="index"/>
+        <el-table-column
+          prop="serviceName"
+          label="服务名"
+        >
+          <template slot-scope="scope">
+            <span class="link-type" @click="handleDetail(scope.row)">{{ scope.row.serviceName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createdAt"
+          label="日期"
+        />
+        <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
+          <el-table-column
+            prop="status"
+            label="运行状态"/>
+        </el-tooltip>
+        <el-table-column label="更多" width="80" fixed="right">
+          <template slot-scope="scope">
+            <el-dropdown>
+              <el-button type="primary" size="mini">
+                点击
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>详细信息</el-dropdown-item>
+                <el-dropdown-item>重置服务</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div v-for="(item,index) in typeList" :key="index" class="shadow-content">
+      <div class="warn-content">
+        <svg-icon icon-class="table" />
+        {{ item._id }}服务
+        <div style="float: right">
+          <el-button type="warning" size="mini" round @click="getRepository(item._id)">新增服务</el-button>
+          <el-button type="warning" size="mini" round>刷新状态</el-button>
+          <el-button type="warning" size="mini" round>重置所有UI服务</el-button>
+        </div>
+      </div>
+      <el-table
+        :data="FormatTabledata[item._id]"
+        :header-cell-style="{background:'#F3F4F7',color:'#555'}"
+        size="medium"
+        align="center"
+        style="width: 100%">
+        <el-table-column
+          :index="indexMethod"
+          type="index"/>
+        <el-table-column
+          prop="serviceName"
+          label="服务名"
+        >
+          <template slot-scope="scope">
+            <span class="link-type" @click="handleDetail(scope.row)">{{ scope.row.serviceName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createdAt"
+          label="创建时间"
+        />
+        <el-table-column
+          prop="status"
+          label="运行状态"/>
+        <el-table-column label="更多" width="80" fixed="right">
+          <template slot-scope="scope">
+            <el-dropdown>
+              <el-button type="primary" size="mini">
+                点击
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item @click.native="getServiceDetails(scope.row)">详细信息</el-dropdown-item>
+                <el-dropdown-item>重置服务</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--添加服务dialog-->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="title">
+      <el-alert
+        :closable="false"
+        title="警告提示的文案"
+        type="warning"
+        description="文字说明文字说明文字说明文字说明文字说明文字说明"
+      />
+      <p class="title-sub">选择服务</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-select v-model="reponame" clearable filterable class="elSelect" placeholder="请选择服务,支持模糊搜索" @change="getTag">
+            <el-option
+              v-for="(item,index) in options"
+              :key="index"
+              :label="item.reponame.split('/')[1]"
+              :value="item.reponame"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <p class="title-sub">选择镜像</p>
+      <el-row :gutter="20">
+        <el-col :span="14">
+          <el-select v-model="tagName" filterable clearable class="elSelect" placeholder="请选择镜像,支持模糊搜索">
+            <el-option
+              v-for="(item,index) in tagOptions"
+              :key="index"
+              :label="item.tagName"
+              :value="item.tagName"/>
+          </el-select>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="CreateClusterService">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="centerDialogVisible"
+      title="详细信息"
+      height="500px"
+      center>
+      <div class="editor-container">
+        <json-editor ref="jsonEditor" v-model="value"/>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  fetchK8sdetail,
+  fetchUserrepository,
+  fetchTaglist,
+  getType,
+  CreateCluService,
+  fetchServiceDetails
+} from '@/api/docker'
+import JsonEditor from '@/components/JsonEditor'
+export default {
+  components: { JsonEditor },
+  data() {
+    return {
+      centerDialogVisible: false,
+      listLoading: true,
+      namespace: null,
+      tableData: [],
+      options: [],
+      tagOptions: [],
+      FormatTabledata: {},
+      reponame: '',
+      typeList: [],
+      tagName: '',
+      server: '',
+      type: '',
+      value: null,
+      images: null,
+      dialogVisible: false,
+      title: '添加服务',
+      formInline: {
+        user: '',
+        region: ''
+      }
+    }
+  },
+  created() {
+    getType().then(res => {
+      this.typeList = res.data.data
+    })
+    this.namespace = this.$route.params.name
+    this.getServicelist()
+  },
+  methods: {
+    getServicelist() {
+      fetchK8sdetail({ 'namespace': this.namespace }).then(res => {
+        const servicelist = res.data.data.services
+        this.array2Object(servicelist)
+      })
+    },
+    getRepository(type) {
+      this.type = type
+      this.reponame = ''
+      this.tagName = ''
+      this.options = []
+      this.tagOptions = []
+      fetchUserrepository({ 'namespace': 'qa-' + type }).then(res => {
+        this.options = res.data.data.repoInfo
+        this.server = res.data.data.server
+      })
+      this.dialogVisible = true
+    },
+    getTag() {
+      fetchTaglist({ reponame: this.reponame }).then(res => {
+        if (res.data.data.tagCount) {
+          this.tagOptions = res.data.data.tagInfo
+        }
+      })
+    },
+    CreateClusterService() {
+      const self = this
+      const image = `${this.server}/${this.reponame}:${this.tagName}`
+      CreateCluService({ serviceName: this.reponame.split('/')[1], namespace: this.namespace, image: image, type: this.type }).then(res => {
+        if (res.data.code === '0000') {
+          this.$message({
+            message: res.data.data,
+            type: 'success',
+            duration: 1000,
+            onClose() {
+              self.dialogVisible = false
+              self.getServicelist()
+            }
+          })
+        } else {
+          this.$message({
+            message: res.data.msg,
+            type: 'error'
+          })
+        }
+      })
+    },
+    handleDetail() {
+      alert('暂未开发')
+    },
+    getServiceDetails(value) {
+      fetchServiceDetails({ serviceName: value.serviceName, namespace: value.namespace }).then(res => {
+        this.centerDialogVisible = true
+        this.value = res.data.data.service
+      })
+    },
+    array2Object(original) { // 将数组转成对象存储
+      this.FormatTabledata = {}
+      original.forEach((item, index) => {
+        if (Object.keys(this.FormatTabledata).indexOf(item.labels.type) > -1) {
+          this.FormatTabledata[item.labels.type].push(item)
+        } else {
+          this.FormatTabledata[item.labels.type] = []
+          this.FormatTabledata[item.labels.type].push(item)
+        }
+      })
+    },
+    indexMethod(index) {
+      return index + 1
+    }
+  }
+}
+</script>
+<style scoped>
+  .title-sub{
+    margin-top: 30px;
+    font-size: 15px;
+  }
+  .elSelect{
+    width: 100%;
+  }
+
+</style>

src/views/docker/runingEnv.vue

+<template>
+  <div>
+    <div class="shadow-content">
+      <p class="warn-content">
+        <svg-icon icon-class="list"/>
+        运行环境列表
+      </p>
+      <el-table
+        v-loading="listLoading"
+        :data="tableData"
+        :header-cell-style="{background:'#F3F4F7',color:'#555'}"
+        size="medium"
+        align="center"
+        style="width: 100%">
+        <el-table-column
+          :index="indexMethod"
+          type="index"/>
+        <el-table-column
+          prop="name"
+          label="名称"
+        >
+          <template slot-scope="scope">
+            <span class="link-type" @click="handleDetail(scope.row)">{{ scope.row.name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createdAt"
+          label="日期"
+        />
+        <el-table-column
+          prop="status"
+          label="运行状态"/>
+        <el-table-column
+          prop="description"
+          label="描述信息"/>
+        <el-table-column label="操作" min-width="100px">
+          <template slot-scope="scope">
+            <el-button type="infos" size="mini">备份</el-button>
+            <el-button size="mini" type="primary">挂起</el-button>
+            <el-button size="mini" type="danger">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { fetchKubernetesList } from '@/api/docker'
+
+export default {
+  data() {
+    return {
+      name: 'hello',
+      listLoading: true,
+      tableData: []
+    }
+  },
+  created() {
+    this.fetchK8sList()
+  },
+  methods: {
+    fetchK8sList() {
+      fetchKubernetesList().then(res => {
+        this.tableData = res.data.data.namespaces
+      })
+      setTimeout(() => {
+        this.listLoading = false
+      }, 0.5 * 1000)
+    },
+    indexMethod(index) {
+      return index + 1
+    },
+    handleDetail(scope) {
+      this.$router.push({
+        path: `/dockers/runingEnv/${scope.name}`
+      })
+    },
+    handleEdit() {
+      console.log(1)
+    },
+    handleDelete() {
+      console.log(2)
+    }
+  }
+}
+</script>