油烟检测系统

zmc

2023-08-07 1e18f0bcee0358e13c0e2cb750d17cd7ef5bf4d6

 src/components/layout/AppAside.vue

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

export default {

    data() {
        return {
      menuHeight: '600px',
            isCollapseAside: isCollapse,
            selected: selectedName,
            optionClick:['历史数据','异常分析','实时监测','油烟数据','统计分析','统计数据','油烟浓度日数据','监测设备在线率','净化器开启率','油烟时段超标率','油烟浓度均值']
        }
      // optionClick: [
      //   '历史数据',
      //   '异常分析',
      //   '实时监控',
      //   '油烟数据',
      //   '统计分析',
      //   '统计数据',
      //   '油烟浓度日数据',
      //   '监测设备在线率',
      //   '净化器开启率',
      //   '油烟时段超标率',
      //   '油烟浓度均值',
      //   '获取数据'
      // ],
      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"
    <!--         text-color="#fff" -->
      <el-menu
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"   
         router :collapse="isCollapseAside">
        router
        :collapse="isCollapseAside"
      >
      <el-row ref="headerRef" class="header">
      <el-space>
         <!--  :collapse="isCollapse" -->
                <a href="/" class="logo">
                    <img src="@/assets/companylogo.png" alt="" />
                    <h1>油烟在线监测</h1>
        <a href="/hdata" class="logo" >
          <!-- <img src="@/assets/companylogo.png" alt="" /> -->
          <h1 style="margin-left: 30px;">油烟在线监测</h1>
                </a>
      </el-space>

    </el-row>
        <el-scrollbar :height="menuHeight">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><i-ep-Monitor /></el-icon>
                        <scan >监测数据管理</scan>
            <span>在线监控</span>
                        <!-- @click="handleClick(optionClick[0])" -->
                    </template>

                    <el-menu-item index="hdata" >
                        <el-icon><i-ep-Histogram /></el-icon>
                        <scan @click="selected = optionClick[0]">历史数据</scan>
          <el-menu-item index="ndata" @click="selected = optionClick[0]">
            <el-icon><i-ep-Stopwatch /></el-icon>
            <template #title>实时监控</template>

                    </el-menu-item>

                    <el-menu-item index="edata">

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

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

                    <!-- <el-menu-item index="rdata">
                        <el-icon><i-ep-Stopwatch /></el-icon>
                        <scan>实时数据库</scan>
                    </el-menu-item> -->
          <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-sub-menu index=2>
                <template #title>
                    <el-icon><i-ep-Bell/></el-icon> <scan>测试</scan>
                </template>

                <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>
            <span>分时段分析</span>
                    </template>

                    <el-menu-item index="origin">
                        <el-icon><i-ep-List /></el-icon>
                        <scan @click="selected = optionClick[3]">油烟数据</scan>
          <el-menu-item index="allData" @click="selected = optionClick[3]">
            <el-icon><i-ep-Help /></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-sub-menu index="3">
                    <template #title>
                            <el-icon><i-ep-DataLine /></el-icon>
                            <scan>统计数据折线图</scan>
            <span>分要素分析</span>
                        </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-group >
                            <template #title>
            <!-- <template #title>
                                <span class="slot-lable"> 详细数据</span>
            </template> -->
            <el-menu-item index="day" @click="selected = optionClick[4]">
              <el-icon><i-ep-Notebook /></el-icon>
              <template #title>油烟浓度日数据</template>
            </el-menu-item>
            <el-menu-item index="monitor" @click="selected = optionClick[5]">
              <el-icon><i-ep-Notebook /></el-icon>
              <template #title>监测设备在线率</template>
            </el-menu-item>
            <el-menu-item index="purifier" @click="selected = optionClick[6]">
              <el-icon><i-ep-Notebook /></el-icon>
              <template #title>净化器开启率</template>
            </el-menu-item>

            <el-menu-item index="exceed" @click="selected = optionClick[7]">
              <el-icon><i-ep-Notebook /></el-icon>
              <template #title>油烟时段超标率</template>
            </el-menu-item>

            <el-menu-item index="average" @click="selected = optionClick[8]">
              <el-icon><i-ep-Notebook /></el-icon>
              <template #title>油烟浓度均值</template>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        
        </el-sub-menu>

        <!-- <el-sub-menu index="3">
          <template #title>
            <el-icon><i-ep-DataLine /></el-icon>
            <span>分要素分析</span>
                            </template>
 
          <el-menu-item-group>
      
                            <el-menu-item index="day">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[6]">油烟浓度日数据</scan>
              <span @click="selected = optionClick[6]">油烟浓度日数据</span>
                            </el-menu-item>
                            <el-menu-item index="monitor">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[7]">监测设备在线率</scan>
              <span @click="selected = optionClick[7]">监测设备在线率</span>
                            </el-menu-item>
                            <el-menu-item index="purifier">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[8]">净化器开启率</scan>
              <span @click="selected = optionClick[8]">净化器开启率</span>
                            </el-menu-item>

                            <el-menu-item index="exceed">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[9]">油烟时段超标率</scan>
              <span @click="selected = optionClick[9]">油烟时段超标率</span>
                            </el-menu-item>

                            <el-menu-item index="average">
                                <el-icon><i-ep-Notebook /></el-icon>
                                <scan @click="selected = optionClick[10]">油烟浓度均值</scan>
              <span @click="selected = optionClick[10]">油烟浓度均值</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu> -->

        

            <el-sub-menu index="4">
            <template #title>
            <el-icon><i-ep-Histogram /></el-icon>
            <span>多源数据管理</span>
          </template>
          
          
            <!-- <el-menu-item index="abc">
                <el-icon><i-ep-Bell/></el-icon> <span>数据获取TestWa</span>
            </el-menu-item> -->

            <el-menu-item index="getdata" @click="selected = optionClick[9]">
              <el-icon><i-ep-Notebook /></el-icon>
              <template #title>第三方数据获取</template>
                            </el-menu-item>

                        </el-menu-item-group>
            <el-menu-item index="hdata" @click="selected = optionClick[10]">
            <el-icon><i-ep-Histogram /></el-icon>
            <template #title>历史数据</template>
          </el-menu-item>
                </el-sub-menu>

                <!-- <el-sub-menu index="4">-->
            <!-- <el-sub-menu index="5">
              <template #title>
                <el-icon><i-ep-Histogram /></el-icon>
                <span>测试</span>
              </template>

                <!-- 测试单独项模块 -->
                <!-- <el-menu-item index="tdata">
                <el-icon><i-ep-Bell/></el-icon> <scan>函数测试</scan>
            <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 index="abc">
                <el-icon><i-ep-Bell/></el-icon> <scan>抽屉</scan>
            </el-menu-item> -->
            </el-sub-menu> -->

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

    </el-scrollbar>

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

@@ -158,7 +233,6 @@
    height: 100vh;
    // background-color: rgb(41,45,62);
    width: auto;
  
}

.el-menu {
@@ -175,7 +249,7 @@
            //折叠时隐藏h1文字
            display: none;
        }
        & scan {
    & span {
            display: none;
        }
    }