SIS_Web/src/App.vue

<template>
  <div id="app">
    <el-container style="width: 100%">
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">实时监视</template>
            <el-menu-item index="/about">状态监视</el-menu-item>
            <el-submenu index="2-4">
              <template slot="title">矩阵监视</template>
              <el-menu-item index="2-4-1">选项1</el-menu-item>
              <el-menu-item index="2-4-2">选项2</el-menu-item>
              <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">性能分析</template>
            <el-menu-item index="/gradeEvaluation">等级评估</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
             <template slot="title">对标管理</template>
            <el-submenu index="2-4">
              <template slot="title">风机绩效</template>
              <el-menu-item index="/performanceList_fan">风机绩效榜单</el-menu-item>
            </el-submenu>
            <el-submenu index="2-5">
              <template slot="title">损失对标</template>
              <el-menu-item index="/fiveLossRates">五项损失率</el-menu-item>
            </el-submenu>
            <el-submenu index="2-6">
              <template slot="title">场际对标</template>
              <el-menu-item index="/benchmark_Venue">场内对标</el-menu-item>
              <el-menu-item index="/benchmark_International">场际对标</el-menu-item>
            </el-submenu>
             <el-submenu index="2-7">
              <template slot="title">项目对标</template>
              <el-menu-item index="/benchmark_project">项目对标</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">健康管理</template>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">智能报警</template>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title">安全管控</template>
            <el-menu-item index="7-1">人员矩阵</el-menu-item>
            <el-menu-item index="7-2">全局监视</el-menu-item>
            <el-menu-item index="/point">point</el-menu-item>
            <el-menu-item index="/FanStatusQueryExport">风机状态查询导出</el-menu-item>
          </el-submenu>
          <el-submenu index="8">
            <template slot="title">报表管理</template>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer>GYEE </el-footer>
    </el-container>
  </div>
</template>

<script>
import { datainit } from "../public/websocket";
export default {
  data() {
    return {
      activeIndex: "/index",
    };
  },
  created() {
    // datainit();
  },
  methods: {
    handleSelect(key, keyPath) {},
  },
};
</script>
<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100%;
}
#mychart {
  height: 500px;
  width: 500px;
}
.el-header {
  position: sticky;
  top: 0;
  z-index: 999;
}
.el-footer {
  background-color: rgb(84, 92, 100);
  color: aliceblue;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  text-align: center;
  line-height: 60px;
}
</style>
<style lang="scss">
body,
.el-header,
.el-main,
.el-footer {
  margin: 0 !important;
  padding: 0 !important;
  height: 100%;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
</style>