mky-vent-base/src/views/vent/home/configurable/belt/components/detail/history.vue

<template>
  <div class="scene-box">
    <div class="center-container">
      <div class="history-group">
        <div class="history-container">
          <workFaceHistory
            v-if="activeKey == 'monitor_history' && isRefresh"
            ref="historyTable"
            class="vent-margin-t-20"
            :deviceId="optionValue"
            :device-type="deviceType"
          />
          <!-- <workFaceHandleHistory
            v-if="activeKey == 'handler_history' && isRefresh"
            ref="alarmHistoryTable"
            class="vent-margin-t-20"
            :deviceId="optionValue"
            :device-type="deviceType"
          />
          <workFaceAlarmHistory
            v-if="activeKey == 'faultRecord' && isRefresh"
            ref="handlerHistoryTable"
            class="vent-margin-t-20"
            :deviceId="optionValue"
            :device-type="deviceType"
          /> -->
        </div>
      </div>
    </div>
    <!-- <BottomMenu @change="changeActive" /> -->
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, onMounted, onUnmounted, nextTick } from 'vue';
import BottomMenu from './bottomMenu.vue';
import workFaceHistory from './workFaceHistory.vue';

type DeviceType = { deviceType: string; deviceName: string; datalist: any[] };
const deviceList = ref<DeviceType[]>([]);
const activeKey = ref('monitor_history');
const deviceActive = ref('');
const deviceType = ref('');
const optionValue = ref('');
const loading = ref(false);
const isRefresh = ref(true);
function changeActive(activeValue) {
  activeKey.value = activeValue;
  loading.value = true;
}
</script>
<style lang="less" scoped>
@import '/@/design/vent/modal.less';
@import '/@/design/theme.less';
@ventSpace: zxm;

:deep(.@{ventSpace}-tabs-tabpane-active) {
  overflow: auto;
}
.scene-box {
  --image-wokeFaca-nav: url('/@/assets/images/vent/wokeFaca-nav.png');
  --gradient-0: linear-gradient(45deg, #96c5ca38, #156c7d4a);
  --color-0: #73e8fe;
  --color-2: #96c5ca38;
  --color-3: #156c7d4a;
  --color-5: #0d2b46;
  --color-6: #00fffd22;
  --color-7: #44b4ff33;
  --color-10: #6176af;
  --color-15: #ffffff88;
  --color-16: #f73b2440;
  --color-18: #ff9b1740;
  --color-22: #ffa500;
  width: 100%;
  height: 100%;
}
.history-group {
  padding: 0 30px;
  margin-top: 90px;
  .history-container {
    position: relative;
    background: var(--color-5);
    width: calc(100% + 10px);
    left: -10px;
    border: 1px solid var(--color-6);
    padding: 10px 0;
    box-shadow: 0 0 20px var(--color-7) inset;
  }
}
</style>