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-menu-item index="/cutAndSpeed">切入切出风速整合</el-menu-item>
            <el-menu-item index="/performanceAnalysis">单机性能分析</el-menu-item>
            <el-menu-item index="/singleMachinePower">单机饱和度</el-menu-item>
            <el-menu-item index="/plannedGeneration">计划发电量列表</el-menu-item>
            <el-submenu index="3-1">
              <template slot="title">单机性能分析</template>
              <el-menu-item index="/individual_Pandectinformation">单机信息总览</el-menu-item>
              <el-menu-item index="/PowerandWindspeed_Chart">单机功率风速排布图</el-menu-item>
              <el-menu-item index="/Power_Chart">风机功率排布图</el-menu-item>  
            </el-submenu>
            <el-submenu index="3-2">
              <template slot="title">指标排行</template>
              <el-menu-item index="/GoodnessRank">拟合优度排行</el-menu-item>
              <el-menu-item index="/GrossgenerationRank">总发电量排行</el-menu-item>
              <el-menu-item index="/PercentageLossr_Rank">损失率排行榜</el-menu-item>
              <el-menu-item index="/rankingLoadRate">负荷率排行榜</el-menu-item>
              <el-menu-item index="/rankingCallThePolice">报警排行榜</el-menu-item>
              <el-menu-item index="/rankingUtilization">利用率排行榜</el-menu-item>
              <el-menu-item index="/rankingCurveDeviationRate">曲线偏差率排行</el-menu-item>
            </el-submenu>
          </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-menu-item index="/lossRateFailure">故障损失率</el-menu-item>
              <el-menu-item index="/lossRateAffected">受累损失率</el-menu-item>
              <el-menu-item index="/lossRateMaintenance">检修损失率</el-menu-item>
              <el-menu-item index="/lossRatePerformance">性能损失率</el-menu-item>
              <el-menu-item index="/lossRateAbandoned">弃风率</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 index="2-8">
              <template slot="title">性能对标</template>
              <el-menu-item index="/benchmark_property">性能对标</el-menu-item>
              <el-menu-item index="/benchmark_SingleTransverse"
                >单机横向对比</el-menu-item
              >
            </el-submenu>
             <el-submenu index="2-9">  
              <template slot="title">值际对标</template>
              <el-menu-item index="/interValue">值际对标</el-menu-item>
          </el-submenu>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">健康管理</template>
            <el-menu-item index="/FitnessRegulate">健康管理</el-menu-item>
            <el-menu-item index="/healthAssessment">健康评价报告</el-menu-item>
          </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-container>
  </div>
</template>

<script>
import { datainit } from "../public/websocket";
export default {
  data() {
    return {
      activeIndex: "/index",
    };
  },
  created() {
     //datainit("/topic/popup");
  },
  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>