提交

src/views/revent-boot/monitor/online.vue

@@ -0,0 +1,93 @@
+l<template>
+  <div class="pd10">
+    <el-row>
+      <el-col>
+        <el-tabs
+          v-model.trim="activeName"
+          @tab-click="handleClick"
+          type="border-card"
+        >
+          <el-tab-pane label="导航" name="1" :style="'height:' + vh + 'px;'">
+            <Navigation
+            v-if='activeName==1'
+              @Statistics="Statistics"
+              @analysis="analysis"
+              @Administration="Administration"
+          />
+          </el-tab-pane>
+          <el-tab-pane label="事件统计" name="2" :style="'height:' + vh + 'px;'"
+            >
+            <Statistics  v-if='activeName==2' />
+          </el-tab-pane>
+          <el-tab-pane label="事件分析" name="3" :style="'height:' + vh + 'px;'"
+            >
+            <analysis  v-if='activeName==3'/>
+          </el-tab-pane>
+          <el-tab-pane
+            label="运行情况"
+            name="4"
+            :style="'height:' + vh + 'px;'"
+          >
+            <situation  v-if='activeName==4'
+          /></el-tab-pane>
+        </el-tabs>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script>
+import Navigation from "@/views/Event-boot/components/monitoringpoint/Navigation.vue";
+import analysis from "@/views/Event-boot/components/monitoringpoint/analysis.vue";
+import situation from "@/views/Event-boot/components/monitoringpoint/situation.vue";
+import Statistics from "@/views/Event-boot/components/monitoringpoint/Statistics.vue";
+
+export default {
+  components: { Navigation, analysis, situation, Statistics },
+  data() {
+    return {
+      vh: undefined,
+      activeName: "1"
+    };
+  },
+  created() {},
+  mounted() {
+    this.setHeight()
+        window.addEventListener('resize', this.setHeight)
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.setHeight)
+    },
+    methods: {
+        setHeight() {
+    this.vh = window.sessionStorage.getItem('appheight') - 82;
+          
+     
+        },
+    handleClick(tab, event) {
+      // console.log(tab, event);
+    },
+    Statistics(){
+this.activeName='2'
+    },
+    analysis(){
+this.activeName='3'
+    },
+    Administration(){
+this.activeName='4'
+    },
+  }
+};
+</script>
+<style lang="less" scoped>
+@import url("../../../../styles/comStyle.less");
+::v-deep .el-table .cell {
+  text-align: center;
+}
+::v-deep .el-tabs--border-card > .el-tabs__content {
+  padding: 10px;
+}
+.block {
+  margin-top: 10px;
+  
+}
+</style>