SaaS-lib/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue

<template>
  <div class="left-box">
    <liftInfo
      v-for="(item, index) in liftBox"
      :key="index"
      :liftInfo="item"
      @click="clickLift(item)" />
    <a-drawer
      v-model:visible="visible"
      class="left-item"
      :width="600"
      :forceRender="preload"
      placement="right"
      :body-style="{
        backgroundColor: 'rgba(0, 0, 0, 1)',
        overflow: 'hidden',
        position: 'relative',
      }"
      :closable="false"
      id="drawer"
      :maskStyle="{ 'background-color': 'rgba(0, 0, 0,0.5)' }">
      <a-tabs :activeKey="'1'">
        <a-tab-pane key="1" tab="日志">
          <liftPage ref="leftPage" @clickDrawer="clickDrawer" />
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import liftInfo from './liftInfo.vue';
  import liftPage from './liftPage.vue';
  // 请求

  //弹窗
  const visible = ref(false);
  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
  const preload = ref(false);
  //选择的电梯
  const selctLeft = ref({});
  // table页面 ref
  const leftPage = ref(null);

  // 初始化 ===========================================================
  onMounted(() => {});

  // tab页部分 ========================================================
  const liftBox = ref([
    {
      name: '1站台西侧扶梯',
      workState: 1,
      faultState: 2,
      direction: 1,
      type: 2,
      isLeft: true,
      styleText: { left: '10%', bottom: '33%' },
    },
    {
      name: '2站台西侧扶梯',
      workState: 1,
      faultState: 2,
      direction: 1,
      type: 2,
      isLeft: true,
      styleText: { left: '3%', bottom: '52%' },
    },
    {
      name: '2站台东侧扶梯',
      workState: 1,
      faultState: 2,
      direction: 1,
      type: 2,
      isLeft: true,
      styleText: { left: '48%', bottom: '69%' },
    },
    {
      name: '1站台东侧扶梯',
      workState: 1,
      faultState: 2,
      direction: 1,
      type: 2,
      isLeft: true,
      styleText: { left: '65%', bottom: '62%' },
    },
    {
      name: '办公东区扶梯',
      workState: 1,
      faultState: 2,
      direction: 1,
      type: 2,
      isLeft: true,
      styleText: { left: '78%', bottom: '42%' },
    },
    {
      name: '办公西区扶梯',
      workState: 1,
      faultState: 2,
      direction: 1,
      type: 2,
      isLeft: true,
      styleText: { left: '15%', bottom: '15%' },
    },
    {
      name: '1站台直梯',
      workState: 0,
      faultState: 3,
      direction: 0,
      type: 1,
      isLeft: false,
      styleText: { left: '35%', bottom: '50%' },
    },
    {
      name: '2站台直梯',
      workState: 0,
      faultState: 3,
      direction: 0,
      type: 1,
      isLeft: false,
      styleText: { left: '52%', bottom: '52%' },
    },
  ]);
  //点击获取详情
  const clickLift = (item: any) => {
    visible.value = true;
    console.log(item, '获取详细日志');
    selctLeft.value = item;
    setTimeout(() => {
      leftPage.value.toggle(selctLeft.value);
    }, 100);
    // 开始预加载
    preload.value = true;
  };
  const clickDrawer = () => {
    visible.value = false;
  };
</script>
<style lang="less" scoped>
  .left-box {
    // 颜色变量，用于区别颜色
    // 正常 - 开启 - 上行 -下行
    --on: #0dffa4;
    // 关闭
    --off: #bfcde2;
    // 暂停 - 维修
    --pause: #ffbc46;
    // 告警 - 急停
    --stop: #f36163;
    // 故障
    --fault: #ff7636;
    // 未知
    --unknown: #a742ff;
    // 触发图标大小
    --size: 36px;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 4px;
    background-image: url(../image/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: white !important;
  }
  :deep(.ant-tabs-ink-bar) {
    background: linear-gradient(180deg, rgba(86, 221, 253, 1) 0%, rgba(25, 176, 255, 1) 100%);
  }
  :deep(.ant-tabs-tabpane) {
    color: white;
    padding: 20px 20px 0px 20px;
    width: 100%;
    height: 950px;
    overflow: hidden;
  }
</style>