Merge branch 'master' of git.xiaojukeji.com:jacklijiajia/thoth-frontend

.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # base api
-VUE_APP_BASE_API = 'http://mock.Intra.xiaojukeji.com/'
+# VUE_APP_BASE_API = 'http://mock.Intra.xiaojukeji.com/'
 
 # vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
 # to control whether the babel-plugin-dynamic-import-node plugin is enabled.

.env.production

@@ -2,5 +2,5 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'http://mock.Intra.xiaojukeji.com/'
+# VUE_APP_BASE_API = 'http://mock.Intra.xiaojukeji.com/'
 

src/App.vue

@@ -5,7 +5,16 @@
 </template>
 
 <script>
+import { getUserInfo } from '@/api/user.js'
+
 export default {
-  name: 'App'
+  name: 'App',
+  mounted() {
+    getUserInfo()
+      .then(res => {
+        localStorage.setItem('realname', res.data.realname)
+        localStorage.setItem('username', res.data.username)
+      })
+  }
 }
 </script>

src/api/interface.js

@@ -2,9 +2,11 @@ import request from '@/utils/request'
 
 // ================================== Interface ======================================
 
+const mockUrl = 'http://mock.Intra.xiaojukeji.com'
+
 export function fetchEnvInfo(envChannel) {
   return request({
-    url: '/api/mock/envConfig/getAllEnvConfigByChannel',
+    url: mockUrl + '/api/mock/envConfig/getAllEnvConfigByChannel',
     method: 'get',
     params: { channelId: envChannel }
   })
@@ -12,7 +14,7 @@ export function fetchEnvInfo(envChannel) {
 
 export function fetchServiceById(data) {
   return request({
-    url: '/api/mock/methodConfig/query',
+    url: mockUrl + '/api/mock/methodConfig/query',
     method: 'post',
     data
   })
@@ -20,7 +22,7 @@ export function fetchServiceById(data) {
 
 export function fetchServiceList(data) {
   return request({
-    url: '/api/mock/methodConfig/query',
+    url: mockUrl + '/api/mock/methodConfig/query',
     method: 'post',
     data
   })
@@ -28,7 +30,7 @@ export function fetchServiceList(data) {
 
 export function fetchConsumerList() {
   return request({
-    url: '/api/mock/dubboConsumer/getAll',
+    url: mockUrl + '/api/mock/dubboConsumer/getAll',
     method: 'get',
     params: {}
   })
@@ -36,7 +38,7 @@ export function fetchConsumerList() {
 
 export function createService(data) {
   return request({
-    url: '/api/mock/methodConfig/add',
+    url: mockUrl + '/api/mock/methodConfig/add',
     method: 'post',
     data
   })
@@ -44,7 +46,7 @@ export function createService(data) {
 
 export function updateService(data) {
   return request({
-    url: '/api/mock/methodConfig/update',
+    url: mockUrl + '/api/mock/methodConfig/update',
     method: 'post',
     data
   })
@@ -52,7 +54,7 @@ export function updateService(data) {
 
 export function changeStatus(data) {
   return request({
-    url: '/api/mock/methodConfig/changeStatus',
+    url: mockUrl + '/api/mock/methodConfig/changeStatus',
     method: 'post',
     data
   })

src/api/rule.js

@@ -1,10 +1,11 @@
 import request from '@/utils/request'
 
 // ================================== Rule ======================================
+const mockUrl = 'http://mock.Intra.xiaojukeji.com'
 
 export function fetchRuleById(data) {
   return request({
-    url: '/api/mock/mockRule/query',
+    url: mockUrl + '/api/mock/mockRule/query',
     method: 'post',
     data
   })
@@ -12,7 +13,7 @@ export function fetchRuleById(data) {
 
 export function fetchRuleList(data) {
   return request({
-    url: '/api/mock/mockRule/query',
+    url: mockUrl + '/api/mock/mockRule/query',
     method: 'post',
     data
   })
@@ -20,7 +21,7 @@ export function fetchRuleList(data) {
 
 export function createRule(data) {
   return request({
-    url: '/api/mock/mockRule/add',
+    url: mockUrl + '/api/mock/mockRule/add',
     method: 'post',
     data
   })
@@ -28,7 +29,7 @@ export function createRule(data) {
 
 export function updateRule(data) {
   return request({
-    url: '/api/mock/mockRule/update',
+    url: mockUrl + '/api/mock/mockRule/update',
     method: 'post',
     data
   })
@@ -36,7 +37,7 @@ export function updateRule(data) {
 
 export function changeStatus(data) {
   return request({
-    url: '/api/mock/mockRule/changeStatus',
+    url: mockUrl + '/api/mock/mockRule/changeStatus',
     method: 'post',
     data
   })

src/api/table.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-const mockUrl = 'http://mock.Intra.xiaojukeji.com/'
+const mockUrl = 'http://mock.Intra.xiaojukeji.com'
 
 export function getList(params) {
   return request({

src/api/user.js

@@ -1,5 +1,14 @@
 import request from '@/utils/request'
 
+const envUrl = 'http://10.179.209.19:8899'
+
+export function getUserInfo() {
+  return request({
+    url: envUrl + '/user',
+    method: 'get'
+  })
+}
+
 export function login(data) {
   return request({
     url: '/user/login',

src/components/Breadcrumb/index.vue

@@ -33,7 +33,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+        matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -43,7 +43,7 @@ export default {
       if (!name) {
         return false
       }
-      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+      return name.trim().toLocaleLowerCase() === '首页'.toLocaleLowerCase()
     },
     pathCompile(path) {
       // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561

src/components/Pagination/index.vue

@@ -40,7 +40,7 @@ export default {
     },
     layout: {
       type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
+      default: 'total, sizes, ->,prev, pager, next, jumper'
     },
     background: {
       type: Boolean,

src/icons/svg/Float_icon_二维码_蓝色.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:dodgerblue;}
+	.st0{fill:#0FE3FF;}
 </style>
 <g id="页面1">
 	<g id="thoth_homepage" transform="translate(-1393.000000, -1477.000000)">

src/icons/svg/Float_icon_反馈_蓝色.svg

@@ -3,7 +3,7 @@
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
 <style type="text/css">
-	.st0{fill:dodgerblue;}
+	.st0{fill:#0FE3FF;}
 </style>
 <g id="页面1">
 	<g id="thoth_homepage" transform="translate(-1393.000000, -1521.000000)">

src/icons/svg/yonghu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#bfcbd9" d="M501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM501.041414 62.931285c125.654838 0 227.51269 100.19498 227.51269 223.775576 0 123.605156-101.856829 223.805252-227.51269 223.805252-125.650745 0-227.506551-100.199073-227.506551-223.805252C273.53384 163.097612 375.424438 62.931285 501.041414 62.931285L501.041414 62.931285 501.041414 62.931285zM415.730423 585.125461l189.629895 0c162.314783 0 293.880237 129.387859 293.880237 289.057395l0 18.622126c0 62.922075-131.593084 65.313541-293.880237 65.313541L415.730423 958.118524c-162.319899 0-293.880237-0.092098-293.880237-65.313541l0-18.622126C121.852232 714.51332 253.411547 585.125461 415.730423 585.125461L415.730423 585.125461 415.730423 585.125461z" /></svg>

src/layout/components/Navbar.vue

@@ -5,25 +5,22 @@
     <breadcrumb class="breadcrumb-container" />
 
     <div class="right-menu">
-      <el-dropdown class="avatar-container" trigger="click">
+      <el-dropdown class="avatar-container" @command="handleCommand">
         <div class="avatar-wrapper">
           <img :src="navbarLogo.src" class="user-avatar">
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
-          <router-link to="/home">
-            <el-dropdown-item>
+          <el-dropdown-item>
+            <span style="display:block;">{{ username }}</span>
+          </el-dropdown-item>
+          <router-link to="/">
+            <el-dropdown-item divided>
               Home
             </el-dropdown-item>
           </router-link>
-          <!-- <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a> -->
-          <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">Log Out</span>
+          <el-dropdown-item divided command="b">
+            <span style="display:block;">Log Out</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -54,15 +51,26 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar'
-    ])
+    ]),
+    username() {
+      return localStorage.getItem('realname')
+    }
   },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
-    async logout() {
-      await this.$store.dispatch('user/logout')
-      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    logout() {
+      // await this.$store.dispatch('user/logout')
+      // this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+      location.href = 'http://10.179.209.19:8899/logout'
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'b':
+          this.logout()
+          break
+      }
     }
   }
 }

src/router/index.js

@@ -47,21 +47,16 @@ export const constantRoutes = [
   },
 
   {
-    path: '/home',
+    path: '/',
     component: Home,
     hidden: true
   },
 
   {
-    path: '/',
-    component: Layout,
-    redirect: '/dashboard',
-    children: [{
-      path: 'dashboard',
-      name: 'Dashboard',
-      component: () => import('@/views/dashboard/index'),
-      meta: { title: 'Dashboard', icon: 'dashboard' }
-    }]
+    path: '/home',
+    component: Home,
+    name: '首页',
+    hidden: true
   },
 
   {
@@ -99,6 +94,17 @@ export const constantRoutes = [
       }
     ]
   },
+  // {
+  //   path: '/home',
+  //   component: Layout,
+  //   redirect: '/dashboard',
+  //   children: [{
+  //     path: 'dashboard',
+  //     name: 'Dashboard',
+  //     component: () => import('@/views/dashboard/index'),
+  //     meta: { title: 'Dashboard', icon: 'dashboard' }
+  //   }]
+  // },
 
   {
     path: '/env-platform',
@@ -157,6 +163,29 @@ export const constantRoutes = [
       }
     ]
   },
+
+  // {
+  //   path: '/mock',
+  //   component: Layout,
+  //   redirect: '/mock/interface',
+  //   name: 'Mock',
+  //   meta: { title: 'Mock服务', icon: 'example' },
+  //   children: [
+  //     {
+  //       path: 'interface',
+  //       name: 'Interface',
+  //       component: () => import('@/views/mock/interface'),
+  //       meta: { title: 'Mock服务', icon: 'interface' }
+  //     },
+  //     {
+  //       path: 'interface/:rule',
+  //       name: 'Rule',
+  //       hidden: true,
+  //       component: () => import('@/views/mock/rule'),
+  //       meta: { title: '规则', icon: 'rule' }
+  //     }
+  //   ]
+  // },
   // {
   //   path: '/form',
   //   component: Layout,

src/settings.js

@@ -1,6 +1,6 @@
 module.exports = {
 
-  title: '托特工具效率平台',
+  title: '托特综合工具平台',
 
   /**
    * @type {boolean} true | false

src/utils/request.js

@@ -10,6 +10,8 @@ const service = axios.create({
   timeout: 5000 // request timeout
 })
 
+axios.defaults.withCredentials = true
+
 // request interceptor
 service.interceptors.request.use(
   config => {
@@ -73,11 +75,61 @@ service.interceptors.response.use(
   },
   error => {
     console.log('err' + error) // for debug
-    Message({
-      message: error.message,
-      type: 'error',
-      duration: 5 * 1000
-    })
+    if (error && error.response) {
+      switch (error.response.status) {
+        case 400:
+          error.message = '错误请求'
+          break
+        case 401:
+          error.message = '未授权，请重新登录'
+          break
+        case 403:
+          error.message = '拒绝访问'
+          break
+        case 404:
+          error.message = '请求错误,未找到该资源'
+          break
+        case 405:
+          error.message = '请求方法未允许'
+          break
+        case 408:
+          error.message = '请求超时'
+          break
+        case 500:
+          error.message = '服务器端出错'
+          break
+        case 501:
+          error.message = '网络未实现'
+          break
+        case 502:
+          error.message = '网络错误'
+          break
+        case 503:
+          error.message = '服务不可用'
+          break
+        case 504:
+          error.message = '网络超时'
+          break
+        case 505:
+          error.message = 'http版本不支持该请求'
+          break
+        default:
+          error.message = `未知错误${error.response.status}`
+      }
+      Message({
+        message: error.message,
+        type: 'warning',
+        duration: 5 * 1000
+      })
+    } else {
+      error.message = '登录中'
+      Message({
+        message: error.message,
+        type: 'warning',
+        duration: 5 * 1000
+      })
+      location.href = 'http://10.179.209.19:8899/'
+    }
     return Promise.reject(error)
   }
 )

src/views/env/index.vue

@@ -9,7 +9,7 @@ export default {
   name: 'ENV',
   data() {
     return {
-      envUrl: 'http://172.23.163.54:8081/' + this.$route.name,
+      envUrl: 'http://10.179.181.222:8866/' + this.$route.name,
       iframeHeight: '720px'
     }
   },

src/views/home/floatMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="div-menu">
-    <div class="div-button-QRCode" @mouseover="QRCodeClassName = 'Float_icon_二维码_蓝色'" @mouseout="QRCodeClassName = 'Float_icon_二维码'"><svg-icon :icon-class="QRCodeClassName" /></div>
+    <div class="div-button-QRCode" @mouseover="QRCodeClassName = 'Float_icon_二维码_蓝色';display = 'display: none;';feedbackClassName = 'Float_icon_反馈';" @mouseout="QRCodeClassName = 'Float_icon_二维码'"><svg-icon :icon-class="QRCodeClassName" /></div>
     <el-card class="QRCode">
-      <div class="QRCode-title">钉钉客服群</div>
+      <div class="QRCode-title">D-Chat客服群</div>
       <el-image :src="imgUrl" style="margin: 0" />
     </el-card>
-    <div class="div-button-feedback" @click="feedBackClick" @mouseover="feedbackClassName = 'Float_icon_反馈_蓝色'" @mouseout="display === 'display: none;'?feedbackClassName = 'Float_icon_反馈':feedbackClassName = 'Float_icon_反馈_蓝色'"><svg-icon :icon-class="feedbackClassName" /></div>
+    <div class="div-button-feedback" @mouseover="feedbackClassName = 'Float_icon_反馈_蓝色';display = 'display: block;'" @mouseout="display === 'display: none;'?feedbackClassName = 'Float_icon_反馈':feedbackClassName = 'Float_icon_反馈_蓝色'"><svg-icon :icon-class="feedbackClassName" /></div>
     <el-card class="feedback" :style="display">
       <div style="font-size: 12pt;color: #666666;display: inline-block">意见反馈</div>
       <div style="float: right;display: inline-block;" @click="feedBackClose"><svg-icon icon-class="float_反馈_icon_close" /></div><br>
@@ -104,8 +104,8 @@ export default {
         moduleName: '',
         content: ''
       },
-      typeOptions: ['反馈问题', '反馈bug'],
-      moduleNameOptions: ['流程管控', '自动化', '数据中心', '环境平台', '服务mock', '虚拟硬件']
+      typeOptions: ['反馈问题', '提出建议', '其他'],
+      moduleNameOptions: ['流程管控', '自动化', '数据中心', '环境平台', 'Mock服务', '虚拟硬件', '其他']
     }
   },
   methods: {

src/views/home/index.vue

@@ -1,106 +1,115 @@
 <template>
-  <div style="height: 1395pt">
+  <div :style="{height: screenHeight,width: screenWidth}">
     <el-menu
+      :style="{width: screenWidth}"
       mode="horizontal"
       :background-color="menuColor"
       text-color="#FFF"
       active-text-color="#FFF"
       @select="handleSelect"
     >
-      <el-image class="logo" :src="logoImage" fit="fill" />
-      <el-menu-item style="margin-left: 18.5%" index="1">流程管控</el-menu-item>
-      <el-menu-item index="2">自动化</el-menu-item>
-      <el-menu-item index="3">数据中心</el-menu-item>
-      <el-menu-item index="4">环境平台</el-menu-item>
-      <el-menu-item index="5">服务mock</el-menu-item>
-      <el-menu-item index="6">虚拟硬件</el-menu-item>
-      <div class="div-login">登录</div>
+      <img class="logo" src="@/assets/home_images/nav_logo@3x.png">
+      <el-menu-item style="margin-left: 18.5%" index="1">环境平台</el-menu-item>
+      <el-menu-item index="2">Mock服务</el-menu-item>
+      <el-menu-item index="3" disabled>数据中心</el-menu-item>
+      <el-menu-item index="4" disabled>流程管控</el-menu-item>
+      <el-menu-item index="5" disabled>自动化</el-menu-item>
+      <el-menu-item index="6" disabled>虚拟硬件</el-menu-item>
+      <div class="div-login">
+        <svg-icon icon-class="yonghu" />
+        <el-dropdown style="color: #ffffff" @command="handleCommand">
+          <span class="el-dropdown-link">
+            {{ username }}<i class="el-icon-arrow-down el-icon--right" />
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="a">Log Out</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
     </el-menu>
     <div style="color: #FFFF">
-      <div class="div-introduction"><span>Thoth综合测试平台</span><br><span style="font-size: 17pt">打造让每个研发测试都离不开的一站式综合工具平台</span></div>
-      <img class="img-arrow" src="@/assets/home_images/banner_icon_arrow@3x.png">
-      <el-image style="width: 100%;z-index: -1;" :src="bannerImage" fit="scale-down" />
+      <div class="div-introduction"><img class="image-title" style="width: 470px" src="@/assets/home_images/banner_title@3x.png"><br><span style="font-size: 17pt">打造让每个研发测试都离不开的一站式综合工具平台</span></div>
+      <img class="img-arrow" style="width: 30px" src="@/assets/home_images/banner_icon_arrow@3x.png">
+      <img style="width: 100%;z-index: -1;" src="@/assets/home_images/banner_pic@3x.png">
     </div>
     <div class="div-main" style="height: 600pt;width 100%;text-align: center;">
       <div style="font-size: 21pt;margin-top: 54pt;color: #333333;">功能介绍</div>
-      <el-card style="margin-left: 0;margin-top: 42pt" shadow="hover" @click.native="handleSelect('1')">
-        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_流程管控@3x.png">
-        <div class="div-title">流程管控</div>
-        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      <el-card disabled style="margin-left: 0;margin-top: 42pt" shadow="hover" @click.native="handleSelect('1')">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_环境平台@3x.png" fit="contain">
+        <div class="div-title">环境平台</div>
+        <div class="div-module-introduction">全面综合的个性化环境服务</div>
       </el-card>
       <el-card shadow="hover" @click.native="handleSelect('2')">
-        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_自动化@3x.png">
-        <div class="div-title">自动化</div>
-        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_服务mock@3x.png">
+        <div class="div-title">Mock服务</div>
+        <div class="div-module-introduction">灵活稳定的Mock服务</div>
       </el-card>
-      <el-card shadow="hover" @click.native="handleSelect('3')">
-        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_数据中心@3x.png">
-        <div class="div-title">数据中心</div>
-        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      <el-card class="expect" shadow="never" @click.native="handleSelect('3')">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_数据中心未上线@3x.png">
+        <div class="div-title" style="color: #999999">数据中心-敬请期待</div>
+        <div class="div-module-introduction">数据构造、统计、备份、分析</div>
       </el-card>
       <br>
-      <el-card style="margin-left: 0;margin-top: 36pt;" shadow="hover" @click.native="handleSelect('4')">
-        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_环境平台@3x.png">
-        <div class="div-title">环境平台</div>
-        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      <el-card class="expect" style="margin-left: 0;margin-top: 36pt;" shadow="never" @click.native="handleSelect('4')">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_流程管控未上线@3x.png">
+        <div class="div-title" style="color: #999999">流程管控-敬请期待</div>
+        <div class="div-module-introduction">简单、明了、一站式流程管理</div>
       </el-card>
-      <el-card shadow="hover" @click.native="handleSelect('5')">
-        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_服务mock@3x.png">
-        <div class="div-title">服务mock</div>
-        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      <el-card class="expect" shadow="never" @click.native="handleSelect('5')">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_自动化未上线@3x.png">
+        <div class="div-title" style="color: #999999">自动化-敬请期待</div>
+        <div class="div-module-introduction">简洁优雅实现自动化</div>
       </el-card>
-      <el-card shadow="hover" @click.native="handleSelect('6')">
-        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_虚拟硬件@3x.png">
-        <div class="div-title">虚拟硬件</div>
-        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      <el-card class="expect" shadow="never" @click.native="handleSelect('6')">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_虚拟硬件未上线@3x.png">
+        <div class="div-title" style="color: #999999">虚拟硬件-敬请期待</div>
+        <div class="div-module-introduction">设备一键生成，自由管控</div>
       </el-card>
     </div>
     <div style="height: 180pt;width 100%;background-color: #1B2341;">
-      <el-row style="top: 25%;left: 15.3%;">
-        <el-col :span="10">
-          <div class="div-footer1">
-            <div>Thoth综合测试平台</div>
-            <span style="margin-top: 18pt">普惠质量技术部 效率工具FT</span>
-            <br>
-            <span>© 2019. All Rights Reserved</span>
-          </div>
-        </el-col>
-        <el-col :span="10">
-          <div class="div-footer2">
-            <div style="visibility: hidden;">1</div>
-            <span style="margin-top: 18pt">服务mock-赵福贵</span>
-            <span>数据中心-王丽莎</span>
-            <span>FT负责人-叶宏刚</span>
-            <br>
-            <span>虚拟硬件-魏洁文</span>
-            <span>环境平台-李嘉嘉</span>
-            <span>产品设计-郑莉</span>
-            <br>
-          </div>
-        </el-col>
-      </el-row>
+      <div class="div-footer1" style="margin-top: 45pt;margin-left: 165pt;">
+        <div>Thoth综合测试平台</div>
+        <span style="margin-top: 18pt">普惠质量技术部 效率工具FT</span>
+        <br>
+        <span>© 2019. All Rights Reserved</span>
+      </div>
+      <div class="div-footer2" style="width: 500px;margin-top: 45pt;margin-left: 550pt;">
+        <div style="visibility: hidden;">Thoth综合测试平台</div>
+        <span style="margin-top: 18pt">Mock服务-赵福贵</span>
+        <span>数据中心-王丽莎</span>
+        <span>FT负责人-叶宏钢</span>
+        <br>
+        <span>虚拟硬件-魏洁文</span>
+        <span>环境平台-李嘉嘉/刘青</span>
+        <span>产品设计-郑莉</span>
+        <br>
+        <span>自动化-陈雅琪</span>
+        <span style="width: 200px">流程管控-郑美双/罗舒宁</span>
+        <br>
+      </div>
     </div>
     <float-menu class="float-menu-home" />
   </div>
 </template>
 
 <style scoped>
+.el-dropdown:hover {
+  cursor: pointer;
+}
 .logo {
   position: absolute;
-  width: 7.5%;
+  width: 100px;
   left: 7.8%;
   top: 18%;
 }
 div.div-login {
+  margin-top: 10px;
   color: #ffffff;
   display: inline-block;
   position: absolute;
-  padding: 0.6% 1.8% 0.6% 1.8%;
   font-size: 10pt;
   top: 22%;
   right: 8.3%;
-  border: 0.5pt solid #ffffff;
-  border-radius: 2px;
 }
 div.div-introduction{
   position: absolute;
@@ -116,6 +125,7 @@ img.img-arrow {
 }
 div.div-footer1,
 div.div-footer2 {
+  position: absolute;
   font-weight: bold;
   color: #FFFFFF;
   font-size: 13.5pt;
@@ -130,25 +140,28 @@ div.div-footer1 > span {
 div.div-footer2 > span {
   margin-bottom: 10px;
   display: inline-block;
-  width: 150px;
+  width: 30%;
   font-size: 10.5pt;
   font-weight: normal;
   color: #FFFFFF;
 }
 .el-menu {
   border: none;
+  height: 68px;
   position: fixed;
   z-index: 10;
-  width: 100%;
 }
 .el-menu-item {
+  padding-top: 1.5pt;
   height: 100%;
 }
 .is-active {
-  background-color: #27a0e4 !important;
+  color: #0FE3FF!important;
+  border-color: #0FE3FF!important;
 }
 .el-menu-item:hover {
-  background-color: #27a0e4 !important;
+  color: #0FE3FF!important;
+  background-color: transparent !important;
 }
 .float-menu-home {
   position: fixed;
@@ -158,7 +171,7 @@ div.div-footer2 > span {
 }
 .el-card {
   display: inline-block;
-  width: 222pt;
+  width: 22%;
   height: 180pt;
   margin-left: 56pt;
   text-align: center;
@@ -167,9 +180,11 @@ div.div-footer2 > span {
 </style>
 
 <style scoped>
-img.image-module-logo {
-  margin-top: 15%;
+.image-module-logo {
+  margin-top: 25pt;
   width: 20%;
+  height: 60px;
+  object-fit: contain;
 }
 div.div-title {
   font-size: 13.5pt;
@@ -179,11 +194,14 @@ div.div-title {
 div.div-module-introduction {
   font-size: 10.5pt;
   color: #999999;
-  margin-top: 10pt;
+  margin-top: 7.5pt;
 }
 .el-card:hover{
   cursor: pointer;
 }
+.el-card.expect:hover {
+  cursor: not-allowed;
+}
 </style>
 
 <style scoped>
@@ -223,8 +241,6 @@ img.img-arrow {
 
 <script>
 import FloatMenu from './floatMenu'
-import logoImage from '@/assets/home_images/nav_logo@3x.png'
-import bannerImage from '@/assets/home_images/banner_pic.png'
 
 export default {
   components: {
@@ -234,20 +250,35 @@ export default {
     return {
       activeIndex2: '1',
       menuColor: 'transparent',
-      logoImage: logoImage,
-      bannerImage: bannerImage
+      processManage: true,
+      screenWidth: '100%',
+      screenHeight: '1395pt'
+    }
+  },
+  computed: {
+    username() {
+      return localStorage.getItem('realname')
     }
   },
   mounted() {
     window.addEventListener('scroll', this.handleScroll, true)
+    window.onresize = () => {
+      return (() => {
+        if (document.body.clientWidth < 1300) {
+          this.screenWidth = '1300px'
+        } else {
+          this.screenWidth = '100%'
+        }
+      })()
+    }
   },
   methods: {
     handleSelect(key, keyPath) {
       switch (key) {
-        case '4' :
+        case '1' :
           this.$router.push({ name: '环境' })
           break
-        case '5' :
+        case '2' :
           this.$router.push({ name: 'Mock' })
       }
     },
@@ -261,6 +292,13 @@ export default {
       } else {
         this.menuColor = 'transparent'
       }
+    },
+    handleCommand(command) {
+      switch (command) {
+        case 'a':
+          location.href = 'http://10.179.209.19:8899/logout'
+          break
+      }
     }
   }
 }

src/views/mock/interface.vue

@@ -26,34 +26,34 @@
       :key="tableKey"
       v-loading="listLoading"
       :data="list"
-      border
       fit
       highlight-current-row
       style="width: 100%;"
+      :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="60">
+      <el-table-column label="ID" prop="id" sortable align="center" min-width="60">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="服务名" width="150px" align="center">
+      <el-table-column label="服务名" min-width="150px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.customName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="接口类" width="220px" align="center">
+      <el-table-column label="接口类" min-width="220px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.interfaceName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="版本" min-width="60px">
+      <el-table-column label="版本" min-min-width="60px">
         <template slot-scope="{row}">
           <span>{{ row.serviceVersion }}</span>
           <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
         </template>
       </el-table-column>
-      <el-table-column label="方法名" width="110px" align="center">
+      <el-table-column label="方法名" min-width="110px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.methodName }}</span>
         </template>
@@ -69,24 +69,24 @@
           <span v-else>0</span>
         </template>
       </el-table-column> -->
-      <el-table-column label="状态" class-name="status-col" width="100">
+      <el-table-column label="状态" class-name="status-col" min-width="100">
         <template slot-scope="{row}">
           <el-tag :type="row.methodStatus | statusFilter">
             {{ statusMappings.get(row.methodStatus) }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="更新时间" width="150px" align="center">
+      <el-table-column label="更新时间" min-width="150px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.updateTimeStr }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="showReviewer" label="备注" width="110px" align="center">
+      <el-table-column v-if="showReviewer" label="备注" min-width="110px" align="center">
         <template slot-scope="scope">
           <span style="color:red;">{{ scope.row.remark }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="370px" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" min-width="370px" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleCheck(row)">
             查看
@@ -186,6 +186,9 @@
 </template>
 
 <style scoped>
+.filter-item {
+  margin-top: 10px;
+}
 </style>
 
 <script>
@@ -230,6 +233,9 @@ export default {
   },
   data() {
     return {
+      styleObj: {
+        'color': 'rgba(0, 0, 0, 0.726)'
+      },
       tableKey: 0,
       list: null,
       total: 0,

src/views/mock/rule.vue

@@ -27,56 +27,56 @@
       :key="tableKey"
       v-loading="listLoading"
       :data="list"
-      border
       fit
       highlight-current-row
       style="width: 100%;"
+      :header-cell-style="styleObj"
       @sort-change="sortChange"
     >
-      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
+      <el-table-column label="ID" prop="id" sortable="custom" align="center" min-width="80px">
         <template slot-scope="scope">
           <span>{{ scope.row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="方法名" width="150px" align="center">
+      <el-table-column label="方法名" min-width="150px" align="center">
         <!-- <template slot-scope="scope"> -->
         <span>{{ this.$route.query.methodName }}</span>
         <!-- </template> -->
       </el-table-column>
-      <el-table-column label="方法ID" width="220px" align="center">
+      <el-table-column label="方法ID" min-width="220px" align="center">
         <!-- <template slot-scope="scope"> -->
         <span>{{ this.$route.path.split('/')[3] }}</span>
         <!-- </template> -->
       </el-table-column>
-      <el-table-column label="规则" min-width="60px">
+      <el-table-column label="规则" min-min-width="60px">
         <template slot-scope="{row}">
           <span>{{ row.whenScript }}</span>
           <!-- <el-tag>{{ row.type | typeFilter }}</el-tag> -->
         </template>
       </el-table-column>
-      <el-table-column label="优先级" width="110px" align="center">
+      <el-table-column label="优先级" min-width="110px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.execSort }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="状态" class-name="status-col" width="100">
+      <el-table-column label="状态" class-name="status-col" min-width="100">
         <template slot-scope="{row}">
           <el-tag :type="row.status | statusFilter">
             {{ statusMappings.get(row.status) }}
           </el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="更新时间" width="150px" align="center">
+      <el-table-column label="更新时间" min-width="150px" align="center">
         <template slot-scope="scope">
           <span>{{ scope.row.updateTimeStr }}</span>
         </template>
       </el-table-column>
-      <el-table-column v-if="showReviewer" label="返回值" width="110px" align="center">
+      <el-table-column v-if="showReviewer" label="返回值" min-width="110px" align="center">
         <template slot-scope="scope">
           <span style="color:red;">{{ scope.row.returnMessage }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="370" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" min-width="230" class-name="small-padding fixed-width">
         <template slot-scope="{row}">
           <el-button type="primary" size="mini" @click="handleCheck(row)">
             查看
@@ -167,6 +167,9 @@ export default {
   },
   data() {
     return {
+      styleObj: {
+        'color': 'rgba(0, 0, 0, 0.726)'
+      },
       tableKey: 0,
       list: null,
       total: 0,