gasInjection-project/src/views/vent/monitorManager/fanLocalMonitor/components/DetailModal.vue

<template>
  <BasicModal @register="register"  title="风机详情" width="100%" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
    <div class="detail-box">
      <div class="left-box">流程图</div>
      <div class="right-box">
        <div class="right-title">二部胶带机移变移动变电站控制详情</div>
        <div class="detail-container">
          <div class="detail-control">
            <div>高压分闸</div>
            <div>高压合闸</div>
            <div>高压复位</div>
            <div>低压复位</div>
          </div>
          <div class="detail-box">
            <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
              <a-tab-pane key="1" tab="运行状态">
                    
              </a-tab-pane>
              <a-tab-pane key="2" tab="保护使能">
                
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>

import { onMounted, ref, defineEmits, onUnmounted, watch } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';

const emit = defineEmits(['close', 'register'])
const props = defineProps({
  
})
const activeKey = ref('1')

// 注册 modal
const [register, { closeModal }] = useModalInner();

const tabChange = (key) => {
  activeKey.value = key
}

async function onSubmit() {
  emit('close')
  closeModal();
}

onMounted(async () => {

});
onUnmounted(() => {

});
</script>
<style scoped lang="less">

  @import '/@/design/vent/color.less';
  @import '/@/design/vent/modal.less';
  .detail-box{
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    .left-box{
      width: 600px;
      height: 100%;
      border-right: 1px solid #ffffff22;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
    }
    .right-box{
      flex: 1;
      height: 100%;
      .right-title{
        line-height: 60px;
      }
      .detail-container{
        height: 100%;
        display: flex;
        justify-content: space-between;
        
        .detail-control{
          width: 300px;
          display: flex;
          flex-direction: column;
          background: #ffffff11;
        }
        .detail-box{

        }
      }
    }
  }
</style>