Crunchy
2025-04-29 e5454b769d44a34af423bf87ac8a740bf8c20341
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
  <el-row>
    <el-col :span="2">
      <el-menu @select="clickSelect" :default-active="activeName">
        <el-menu-item index="电源稳定性">
          <span slot="title">电源稳定性</span>
        </el-menu-item>
        <el-menu-item index="防雷检测">
          <span slot="title">防雷检测</span>
        </el-menu-item>
        <el-menu-item index="照度记录">
          <span slot="title">照度记录</span>
        </el-menu-item>
        <el-menu-item index="温湿度记录">
          <span slot="title">温湿度记录</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :span="22" style="padding: 10px">
      <power-supply-stability v-if="activeName === '电源稳定性'"/>
      <lightning-protection-detection v-if="activeName === '防雷检测'" />
      <illuminance-recording v-if="activeName === '照度记录'"/>
      <temperature-humidity-record v-if="activeName === '温湿度记录'"/>
    </el-col>
  </el-row>
</template>
 
<script>
// 电源稳定性
import PowerSupplyStability from "./facilities-environmental-conditions/power-supply-stability.vue";
// 防雷检测
import LightningProtectionDetection from "./facilities-environmental-conditions/lightning-protection-detection.vue";
// 照度记录
import IlluminanceRecording from "./facilities-environmental-conditions/illuminance-recording.vue";
// 温湿度记录
import TemperatureHumidityRecord from "./facilities-environmental-conditions/temperature-humidity-record.vue";
 
export default {
  components: {TemperatureHumidityRecord, IlluminanceRecording, LightningProtectionDetection, PowerSupplyStability},
  data() {
    return {
      activeName: "电源稳定性"
    }
  },
  methods: {
    clickSelect(index) {
      this.activeName = index;
    }
  }
}
</script>