油烟监测系统 Vue代码

zmc

2023-08-14 172d73cbe737c04b3d2c3fe8908db2460c241543

 src/components/layout/AppAside.vue

@@ -12,13 +12,12 @@
      optionClick: [
        '实时监控',
        '异常分析',
        '数据统计分析',
        '数据质量分析',
        '全要素分析',
        '油烟浓度日数据',
        '油烟浓度分析',
        '监测设备在线率',
        '净化器开启率',
        '油烟时段超标率',
        '油烟浓度均值',
        '第三方数据获取',
        '历史数据',
      ]
@@ -41,8 +40,8 @@
  <el-aside>
    <!--         text-color="#fff" -->
      <el-menu
        background-color="#0DA5AA"
        active-text-color="#F77234"
        background-color="rgb(50,155,185)"
        active-text-color="rgb(255, 242, 0)"
        class="el-menu-vertical-demo"
        default-active="2"
        @open="handleOpen"
@@ -64,7 +63,7 @@
        <el-sub-menu index="1">
          <template #title>
            <el-icon><i-ep-Monitor /></el-icon>
            <span>在线监控</span>
            <span class="menu-text">在线监控</span>
            <!-- @click="handleClick(optionClick[0])" -->
          </template>

@@ -83,7 +82,7 @@

          <el-menu-item index="analysisOrigin" @click="selected = optionClick[2]">
            <el-icon><i-ep-Search /></el-icon>
            <template #title>数据统计分析</template>
            <template #title>数据质量分析</template>
          </el-menu-item>
          
        </el-sub-menu>
@@ -91,8 +90,8 @@
      
        <el-sub-menu index="2">
          <template #title>
            <el-icon><i-ep-Histogram /></el-icon>
            <span>分时段分析</span>
            <el-icon><i-ep-DataAnalysis /></el-icon>
            <span class="menu-text">分时段分析</span>
          </template>
         
          <el-menu-item index="allData" @click="selected = optionClick[3]">
@@ -101,7 +100,7 @@
          </el-menu-item>
          <el-sub-menu index="3">
          <template #title>
            <el-icon><i-ep-DataLine /></el-icon>
            <el-icon><i-ep-DataBoard /></el-icon>
            <span>分要素分析</span>
          </template>
 
@@ -110,71 +109,35 @@
                     <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-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-Notebook /></el-icon>
              <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-Notebook /></el-icon>
              <el-icon><i-ep-TrendCharts /></el-icon>
              <template #title>净化器开启率</template>
            </el-menu-item>

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

            <el-menu-item index="average" @click="selected = optionClick[8]">
              <el-icon><i-ep-Notebook /></el-icon>
            <!-- <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> -->
          </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>
              <span @click="selected = optionClick[6]">油烟浓度日数据</span>
            </el-menu-item>
            <el-menu-item index="monitor">
              <el-icon><i-ep-Notebook /></el-icon>
              <span @click="selected = optionClick[7]">监测设备在线率</span>
            </el-menu-item>
            <el-menu-item index="purifier">
              <el-icon><i-ep-Notebook /></el-icon>
              <span @click="selected = optionClick[8]">净化器开启率</span>
            </el-menu-item>

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

            <el-menu-item index="average">
              <el-icon><i-ep-Notebook /></el-icon>
              <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>
            <el-icon><i-ep-DataLine /></el-icon>
            <span class="menu-text">多源数据管理</span>
          </template>
          
          
@@ -182,12 +145,12 @@
                <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>
            <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 index="hdata" @click="selected = optionClick[10]">
            <el-menu-item index="hdata" @click="selected = optionClick[9]">
            <el-icon><i-ep-Histogram /></el-icon>
            <template #title>历史数据</template>
          </el-menu-item>
@@ -206,6 +169,11 @@
                <el-icon><i-ep-Bell/></el-icon> <span>测试2</span>
            </el-menu-item>
    
            <el-menu-item index="test1">
                <el-icon><i-ep-Bell/></el-icon> <span>测试3</span>
            </el-menu-item>
            
    
            </el-sub-menu> -->


@@ -217,8 +185,8 @@

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

  width: auto;
@@ -226,8 +194,8 @@

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

  &.el-menu--collapse {
@@ -257,13 +225,15 @@
    height: 32px;
  }
}
// .el-menu-item {
//     background-color: rgb(41,45,62);
// }

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