Newer
Older
operation_web / src / components / ServiceWatch / serverDetail.vue
  1. <template>
  2. <div>
  3. <div class="header">
  4. <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
  5. <el-button
  6. size="mini"
  7. icon="el-icon-back"
  8. class="back-button"
  9. @click="back"
  10. type="primary"
  11. >返回</el-button
  12. >
  13. <h2 class="back-h2">{{ pathQuery.instanceId }}</h2>
  14. <span class="back-h2" style="font-size:12px"
  15. >({{ pathQuery.instanceName }})</span
  16. >
  17. </div>
  18. <div>
  19. <el-menu
  20. :default-active="activeIndex"
  21. class="el-menu-demo"
  22. mode="horizontal"
  23. @select="handleSelect"
  24. type="border-card"
  25. >
  26. <el-menu-item
  27. v-for="(item, index) in siteNameList"
  28. :index="`${index}`"
  29. :key="item.index"
  30. class="title"
  31. >{{ item.name }}</el-menu-item
  32. >
  33. </el-menu>
  34. </div>
  35. <div style="height:calc(100% - 112px)">
  36. <router-view id="ContentView1"></router-view>
  37. </div>
  38. </div>
  39. </template>
  40.  
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. activeIndex: "0",
  46. siteNameList: [
  47. { path: "/ServiceWatch/serverDetail", name: "基本信息" },
  48. { path: "/ServiceWatch/serverMonitor", name: "监控" },
  49. { path: "/ServiceWatch/serverApplied", name: "服务应用" },
  50. { path: "/ServiceWatch/nginxWatch", name: "nginx监控" }
  51. ],
  52. pathQuery: []
  53. };
  54. },
  55. methods: {
  56. handleSelect(key, keyPath) {
  57. this.activeIndex = key;
  58. this.$router.push({
  59. path: this.siteNameList[key]["path"],
  60. query: this.pathQuery
  61. });
  62. // console.log(key,'key')
  63. },
  64. back() {
  65. this.$router.push("/ServiceWatch/serverManage");
  66. }
  67. },
  68. created() {
  69. this.pathQuery = this.$route.query;
  70. this.siteNameList.forEach((item, index) => {
  71. if (item.path === this.$route.path) {
  72. this.activeIndex = index + "";
  73. }
  74. });
  75. // this.activeIndex
  76. // console.log(this.$route,this.pathQuery)
  77. }
  78. };
  79. </script>
  80.  
  81. <style scoped>
  82. .header {
  83. background-color: var(--tablethead);
  84. /* display: flex; */
  85. text-align: left;
  86. padding: 10px 20px;
  87. border-bottom: 1px solid var(--tablethead);
  88. }
  89. .el-menu {
  90. background-color: var(--tablebody);
  91. }
  92. .el-menu.el-menu--horizontal {
  93. border-bottom: 1px solid var(--tablebody);
  94. }
  95. .back-a {
  96. height: 26px;
  97. line-height: 26px;
  98. width: 26px;
  99. box-sizing: border-box;
  100. display: inline-block;
  101. text-align: center;
  102. /* margin-left: -6px; */
  103. vertical-align: middle;
  104. margin-right: 24px;
  105. }
  106. .back-button {
  107. margin-right: 24px;
  108. }
  109. .el-icon-back {
  110. /* width: 16px;
  111. height: 16px; */
  112. font-size: 20px;
  113. /* display: inline-block; */
  114. /* vertical-align: middle; */
  115. /* background-repeat: no-repeat; */
  116. }
  117. .back-h2 {
  118. color: var(--white);
  119. display: inline-block;
  120. vertical-align: middle;
  121. font-size: 16px;
  122. font-weight: 700;
  123. margin-right: 20px;
  124. max-width: 70%;
  125. overflow: hidden;
  126. white-space: nowrap;
  127. text-overflow: ellipsis;
  128. height: 30px;
  129. line-height: 30px;
  130. }
  131. #ContentView1 {
  132. /* height: 100px; */
  133. /* background-color: #fff; */
  134. padding: 20px;
  135. box-sizing: border-box;
  136. position: relative;
  137. }
  138. .el-menu-demo .title {
  139. background-color: var(--tablebody) !important;
  140. background-image: none !important;
  141. color: var(--white) !important;
  142. }
  143. </style>