油烟监测系统 Vue代码

zmc

2023-08-14 172d73cbe737c04b3d2c3fe8908db2460c241543

 src/components/layout/AppAside.vue

@@ -1,206 +1,239 @@
<script >
import { isCollapse } from './isCollapse'
import { selectedName } from './selectName'
<script>
import { isCollapse } from './isCollapse';
import { selectedName } from './selectName';

export default {

    data() {
        return {
            isCollapseAside: isCollapse,
            selected: selectedName,
            optionClick:['历史数据','异常分析','实时监测','油烟数据','统计分析','统计数据','油烟浓度日数据','监测设备在线率','净化器开启率','油烟时段超标率','油烟浓度均值']
        }
  data() {
    return {
      menuHeight: '600px',
      isCollapseAside: isCollapse,
      selected: selectedName,
    
      optionClick: [
        '实时监控',
        '异常分析',
        '数据质量分析',
        '全要素分析',
        '油烟浓度分析',
        '监测设备在线率',
        '净化器开启率',
        '油烟时段超标率',
        '第三方数据获取',
        '历史数据',
      ]
    };
  },
  methods:{
    calMenuHeight() {
      const h1 = this.$refs.headerRef.$el.offsetHeight;
      // const h2 = this.$refs.subTitleRef.$el.offsetHeight;
      return `calc(100vh - ${h1}px `;
    },

}
  },
  mounted(){
    this.menuHeight = this.calMenuHeight();
  }
};
</script>

<template>
    <el-aside>
        <el-scrollbar>
            <el-menu active-text-color="#ffd04b"
        background-color="#545c64"
  <el-aside>
    <!--         text-color="#fff" -->
      <el-menu
        background-color="rgb(50,155,185)"
        active-text-color="rgb(255, 242, 0)"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"   
         router :collapse="isCollapseAside">
         <!--  :collapse="isCollapse" -->
                <a href="/" class="logo">
                    <img src="@/assets/companylogo.png" alt="" />
                    <h1>油烟在线监测</h1>
                </a>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><i-ep-Monitor /></el-icon>
                        <scan >监测数据管理</scan>
                        <!-- @click="handleClick(optionClick[0])" -->
                    </template>
        @close="handleClose"
        router
        :collapse="isCollapseAside"
      >
      <el-row ref="headerRef" class="header">
      <el-space>
        <!--  :collapse="isCollapse" -->
        <a href="/hdata" class="logo" >
          <!-- <img src="@/assets/companylogo.png" alt="" /> -->
          <h1 style="margin-left: 30px;">油烟在线监测</h1>
        </a>
      </el-space>

                    <el-menu-item index="hdata" >
                        <el-icon><i-ep-Histogram /></el-icon>
                        <scan @click="selected = optionClick[0]">历史数据</scan>
                    </el-menu-item>
    </el-row>
        <el-scrollbar :height="menuHeight">
        <el-sub-menu index="1">
          <template #title>
            <el-icon><i-ep-Monitor /></el-icon>
            <span class="menu-text">在线监控</span>
            <!-- @click="handleClick(optionClick[0])" -->
          </template>

                    <el-menu-item index="edata">
                        <el-icon><i-ep-Bell /></el-icon>
                        <scan @click="selected = optionClick[1]">异常分析</scan>
                    </el-menu-item>
          <el-menu-item index="ndata" @click="selected = optionClick[0]">
            <el-icon><i-ep-Stopwatch /></el-icon>
            <template #title >实时监控</template>

                    <el-menu-item index="ndata">
                        <el-icon><i-ep-Stopwatch /></el-icon>
                        <scan @click="selected = optionClick[2]">实时监测</scan>
                    </el-menu-item>
          </el-menu-item>

                    <!-- <el-menu-item index="rdata">
                        <el-icon><i-ep-Stopwatch /></el-icon>
                        <scan>实时数据库</scan>
                    </el-menu-item> -->

                </el-sub-menu>
          <el-menu-item index="edata" @click="selected = optionClick[1]">
            <el-icon><i-ep-Bell /></el-icon>
            <template #title>异常分析</template>
          </el-menu-item>
    

                <!-- <el-sub-menu index=2>
                <template #title>
                    <el-icon><i-ep-Bell/></el-icon> <scan>测试</scan>
                </template>
          <el-menu-item index="analysisOrigin" @click="selected = optionClick[2]">
            <el-icon><i-ep-Search /></el-icon>
            <template #title>数据质量分析</template>
          </el-menu-item>
          
        </el-sub-menu>

                <el-menu-item index="tdata">
                <el-icon><i-ep-Bell/></el-icon> <scan>超标数据</scan>
                </el-menu-item>
            </el-sub-menu> -->
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><i-ep-Histogram /></el-icon>
                        <scan >油烟数据分析</scan>
                    </template>
      
        <el-sub-menu index="2">
          <template #title>
            <el-icon><i-ep-DataAnalysis /></el-icon>
            <span class="menu-text">分时段分析</span>
          </template>
         
          <el-menu-item index="allData" @click="selected = optionClick[3]">
            <el-icon><i-ep-Help /></el-icon>
            <template #title>全要素分析</template>
          </el-menu-item>
          <el-sub-menu index="3">
          <template #title>
            <el-icon><i-ep-DataBoard /></el-icon>
            <span>分要素分析</span>
          </template>
 
          <el-menu-item-group>
            <!-- <template #title>
                     <span class="slot-lable"> 详细数据</span>
            </template> -->
            <el-menu-item index="day" @click="selected = optionClick[4]">
              <el-icon><i-ep-TrendCharts /></el-icon>
              <template #title>油烟浓度分析</template>
            </el-menu-item>
            <el-menu-item index="monitor" @click="selected = optionClick[5]">
              <el-icon><i-ep-TrendCharts /></el-icon>
              <template #title>监测设备在线率</template>
            </el-menu-item>
            <el-menu-item index="purifier" @click="selected = optionClick[6]">
              <el-icon><i-ep-TrendCharts /></el-icon>
              <template #title>净化器开启率</template>
            </el-menu-item>

                    <el-menu-item index="origin">
                        <el-icon><i-ep-List /></el-icon>
                        <scan @click="selected = optionClick[3]">油烟数据</scan>
                    </el-menu-item>
            <el-menu-item index="exceed" @click="selected = optionClick[7]">
              <el-icon><i-ep-TrendCharts /></el-icon>
              <template #title>油烟时段超标率</template>
            </el-menu-item>

                    <el-menu-item index="analysisOrigin">
                        <el-icon><i-ep-Search /></el-icon>
                        <scan @click="selected = optionClick[4]">统计分析</scan>
                    </el-menu-item>
                </el-sub-menu>
            <!-- <el-menu-item index="average" @click="selected = optionClick[8]">
              <el-icon><i-ep-TrendCharts /></el-icon>
              <template #title>油烟浓度均值</template>
            </el-menu-item> -->
          </el-menu-item-group>
        </el-sub-menu>
        
        </el-sub-menu>
            <el-sub-menu index="4">
            <template #title>
            <el-icon><i-ep-DataLine /></el-icon>
            <span class="menu-text">多源数据管理</span>
          </template>
          
          
            <!-- <el-menu-item index="abc">
                <el-icon><i-ep-Bell/></el-icon> <span>数据获取TestWa</span>
            </el-menu-item> -->

                <el-sub-menu index="3">
                    <template #title>
                            <el-icon><i-ep-DataLine /></el-icon>
                            <scan>统计数据折线图</scan>
                        </template>
                        <el-menu-item-group>
                            <template #title>
                                <span class="slot-lable"> 整体数据</span>
                            </template>
                            <el-menu-item index="allData">
                                <el-icon><i-ep-TrendCharts /></el-icon>
                                <scan @click="selected = optionClick[5]">统计数据</scan>
                            </el-menu-item>
                        </el-menu-item-group>
            <el-menu-item index="getdata" @click="selected = optionClick[8]">
              <el-icon><i-ep-TrendCharts /></el-icon>
              <template #title>第三方数据获取</template>
            </el-menu-item>

                        <el-menu-item-group >
                            <template #title>
                                <span class="slot-lable"> 详细数据</span>
                            </template>
                            <el-menu-item index="day">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[6]">油烟浓度日数据</scan>
                            </el-menu-item>
                            <el-menu-item index="monitor">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[7]">监测设备在线率</scan>
                            </el-menu-item>
                            <el-menu-item index="purifier">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[8]">净化器开启率</scan>
                            </el-menu-item>
            <el-menu-item index="hdata" @click="selected = optionClick[9]">
            <el-icon><i-ep-Histogram /></el-icon>
            <template #title>历史数据</template>
          </el-menu-item>
            </el-sub-menu>

                            <el-menu-item index="exceed">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[9]">油烟时段超标率</scan>
                            </el-menu-item>
            <!-- <el-sub-menu index="5">
              <template #title>
                <el-icon><i-ep-Histogram /></el-icon>
                <span>测试</span>
              </template>

                            <el-menu-item index="average">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[10]">油烟浓度均值</scan>
                            </el-menu-item>
            <el-menu-item index="tdata">
                <el-icon><i-ep-Bell/></el-icon> <span>测试1</span>
            </el-menu-item>
            <el-menu-item index="tsdata">
                <el-icon><i-ep-Bell/></el-icon> <span>测试2</span>
            </el-menu-item>

                        </el-menu-item-group>
                </el-sub-menu>

                <!-- <el-sub-menu index="4">-->

                <!-- 测试单独项模块 -->
                <!-- <el-menu-item index="tdata">
                <el-icon><i-ep-Bell/></el-icon> <scan>函数测试</scan>
            <el-menu-item index="test1">
                <el-icon><i-ep-Bell/></el-icon> <span>测试3</span>
            </el-menu-item>
            
            <el-menu-item index="abc">
                <el-icon><i-ep-Bell/></el-icon> <scan>抽屉</scan>
            </el-menu-item> -->

            <!-- <el-menu-item index="analysis">
                <el-icon><i-ep-Bell/></el-icon> <scan>原始数据分析</scan>
            </el-menu-item> -->
    
            </el-sub-menu> -->


            </el-menu>
        </el-scrollbar>
    </el-aside>
    </el-scrollbar>

      </el-menu>
  </el-aside>
</template>

<style lang="scss" scoped>
.el-aside {
    background-color:#545c64;
    height: 100vh;
    // background-color: rgb(41,45,62);
    width: auto;
  
  // background-color: #013335;
  background-color: rgb(50,155,185);
  height: 100vh;

  width: auto;
}

.el-menu {
    // background-color: rgb(41,45,62);
    background-color:#545c64;
    width: 220px;
    border-right: none;
  // background-color: rgb(41,45,62);
  background-color: rgb(50,155,185);
  width: 200px;
  border-right: none;

    &.el-menu--collapse {
        //侧边栏折叠时的样式
        width: 65px;
        
        & h1 {
            //折叠时隐藏h1文字
            display: none;
        }
        & scan {
            display: none;
        }
  &.el-menu--collapse {
    //侧边栏折叠时的样式
    width: 65px;

    & h1 {
      //折叠时隐藏h1文字
      display: none;
    }
    & span {
      display: none;
    }
  }
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    text-decoration: none;
    color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  text-decoration: none;
  color: black;

    img {
        width: 32px;
        height: 32px;
    }
  img {
    width: 32px;
    height: 32px;
  }
}
// .el-menu-item {
//     background-color: rgb(41,45,62);
// }

* {
    color: white;
  color: rgb(252, 255, 255);
}
.slot-lable {
    color: bisque;
  color: bisque;
  // color: rgb(13, 193, 224);
}
</style>
.menu-text {
  font-size: 16px;
}
</style>