- <template>
- <div>
- <div class="header">
- <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
- <el-button
- size="mini"
- icon="el-icon-back"
- class="back-button"
- @click="back"
- type="primary"
- >返回</el-button
- >
- <h2 class="back-h2">{{ pathQuery.instanceId }}</h2>
- <span class="back-h2" style="font-size:12px"
- >({{ pathQuery.instanceName }})</span
- >
- </div>
- <div>
- <el-menu
- :default-active="activeIndex"
- class="el-menu-demo"
- mode="horizontal"
- @select="handleSelect"
- type="border-card"
- >
- <el-menu-item
- v-for="(item, index) in siteNameList"
- :index="`${index}`"
- :key="item.index"
- class="title"
- >{{ item.name }}</el-menu-item
- >
- </el-menu>
- </div>
- <div style="height:calc(100% - 112px)">
- <router-view id="ContentView1"></router-view>
- </div>
- </div>
- </template>
-
- <script>
- export default {
- data() {
- return {
- activeIndex: "0",
- siteNameList: [
- { path: "/ServiceWatch/serverDetail", name: "基本信息" },
- { path: "/ServiceWatch/serverMonitor", name: "监控" },
- { path: "/ServiceWatch/serverApplied", name: "服务应用" },
- { path: "/ServiceWatch/nginxWatch", name: "nginx监控" }
- ],
- pathQuery: []
- };
- },
- methods: {
- handleSelect(key, keyPath) {
- this.activeIndex = key;
- this.$router.push({
- path: this.siteNameList[key]["path"],
- query: this.pathQuery
- });
- // console.log(key,'key')
- },
- back() {
- this.$router.push("/ServiceWatch/serverManage");
- }
- },
- created() {
- this.pathQuery = this.$route.query;
- this.siteNameList.forEach((item, index) => {
- if (item.path === this.$route.path) {
- this.activeIndex = index + "";
- }
- });
- // this.activeIndex
- // console.log(this.$route,this.pathQuery)
- }
- };
- </script>
-
- <style scoped>
- .header {
- background-color: var(--tablethead);
- /* display: flex; */
- text-align: left;
- padding: 10px 20px;
- border-bottom: 1px solid var(--tablethead);
- }
- .el-menu {
- background-color: var(--tablebody);
- }
- .el-menu.el-menu--horizontal {
- border-bottom: 1px solid var(--tablebody);
- }
- .back-a {
- height: 26px;
- line-height: 26px;
- width: 26px;
- box-sizing: border-box;
- display: inline-block;
- text-align: center;
- /* margin-left: -6px; */
- vertical-align: middle;
- margin-right: 24px;
- }
- .back-button {
- margin-right: 24px;
- }
- .el-icon-back {
- /* width: 16px;
- height: 16px; */
- font-size: 20px;
- /* display: inline-block; */
- /* vertical-align: middle; */
- /* background-repeat: no-repeat; */
- }
- .back-h2 {
- color: var(--white);
- display: inline-block;
- vertical-align: middle;
- font-size: 16px;
- font-weight: 700;
- margin-right: 20px;
- max-width: 70%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- height: 30px;
- line-height: 30px;
- }
- #ContentView1 {
- /* height: 100px; */
- /* background-color: #fff; */
- padding: 20px;
- box-sizing: border-box;
- position: relative;
- }
- .el-menu-demo .title {
- background-color: var(--tablebody) !important;
- background-image: none !important;
- color: var(--white) !important;
- }
- </style>