vent-template/src/views/vent/monitorManager/fanLocalMonitor/components/DetailModal.vue

<template>
  <BasicModal @register="register" title="风机详情" width="1600px" v-bind="$attrs" @ok="onSubmit" @cancel="onSubmit" :defaultFullscreen="true">
    <div class="detail-box">
      <div class="left-box">
        <SvgPreview :data-model="data_model" :canvas-drag="false" />
      </div>
      <div class="right-box" v-if="activeBox == 1">
        <div class="right-title">二部胶带机移变移动变电站控制详情</div>
        <div class="detail-container">
          <div class="detail-control">
            <div class="control-item">高压分闸</div>
            <div class="control-item">高压合闸</div>
            <div class="control-item">高压复位</div>
            <div class="control-item">低压复位</div>
          </div>
          <div class="right-detail-box">
            <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
              <a-tab-pane key="1" tab="运行状态">
                <div class="detail-state">
                  <div class="detail-item">
                    <div class="item-title">高压侧</div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>运行状态</div>
                      <div>正常</div>
                    </div>
                    <div v-for="(item, key) in transformMobileH" :key="key" class="vent-flex-row-between detail-item-row">
                      <div>{{ item.title }}</div>
                      <div>-</div>
                    </div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>故障代码</div>
                      <div>正常</div>
                    </div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>分合闸状态</div>
                      <div>正常</div>
                    </div>
                  </div>
                  <div class="detail-item">
                    <div class="item-title">低压侧</div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>运行状态</div>
                      <div>正常</div>
                    </div>
                    <div v-for="(item, key) in transformMobileL" :key="key" class="vent-flex-row-between detail-item-row">
                      <div>{{ item.title }}</div>
                      <div>-</div>
                    </div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>故障代码</div>
                      <div>正常</div>
                    </div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>分合闸状态</div>
                      <div>正常</div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="保护使能">
                <div class="detail-state">
                  <div class="detail-item">
                    <div class="item-title">高压侧</div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>运行状态</div>
                      <div>正常</div>
                    </div>
                    <div v-for="(item, key) in protectionEnableH" :key="key" class="vent-flex-row-between detail-item-row">
                      <div>{{ item.title }}</div>
                      <div>-</div>
                    </div>
                  </div>
                  <div class="detail-item">
                    <div class="item-title">低压侧</div>
                    <div class="vent-flex-row-between detail-item-row">
                      <div>运行状态</div>
                      <div>正常</div>
                    </div>
                    <div v-for="(item, key) in protectionEnableL" :key="key" class="vent-flex-row-between detail-item-row">
                      <div>{{ item.title }}</div>
                      <div>-</div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </div>
      <div class="right-box" v-if="activeBox == 2">
        <div class="right-title">电光馈电</div>
        <div class="detail-container">
          <div class="detail-control">
            <div class="control-item">分闸</div>
            <div class="control-item">合闸</div>
            <div class="control-item">复位</div>
          </div>
          <div class="right-detail-box">
            <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
              <a-tab-pane key="1" tab="运行状态">
                <template v-for="(electric, key) in electricMonitor" :key="index">
                  <div class="padding-20">
                    <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
                      key
                    }}</a-divider>
                    <div class="data-group">
                      <div class="data-item" v-for="(item, index) in electric" :key="index">
                        <div class="title">{{ item.title }}</div>
                        <div v-if="key !== '保护状态'" class="value">-</div>
                        <div v-else class="state-box">
                          <span class="signal-round signal-round-blue"></span><span class="state vent-margin-l-8"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </a-tab-pane>
              <a-tab-pane key="2" tab="定值设定">
                <div class="padding-20">
                  <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">保护状态</a-divider>
                  <div class="data-group">
                    <div class="data-item" v-for="(item, index) in electricState" :key="index">
                      <div class="title">{{ item.title }}</div>
                      <div class="value">{{ item.value }}</div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </div>
      <div class="right-box" v-if="activeBox == 3">
        <div class="right-title">电光风机开关详情</div>
        <div class="detail-container">
          <div class="detail-control">
            <div class="control-item">分闸</div>
            <div class="control-item">合闸</div>
            <div class="control-item">复位</div>
          </div>
          <div class="right-detail-box">
            <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
              <a-tab-pane key="1" tab="运行状态">
                <div class="detail-state">
                  <div class="detail-item">
                    <div class="item-title">备风机</div>
                    <template v-for="(fanState, key) in fanControlState1" :key="index">
                      <div class="padding-20">
                        <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
                          key
                        }}</a-divider>
                        <div class="data-group data-group1">
                          <div class="data-item" v-for="(item, key1) in fanState" :key="key1">
                            <div class="title">{{ key1 }}</div>
                            <div class="value" v-for="(obj, key2) in item" :key="key2">{{ obj.value }}</div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                  <div class="detail-item">
                    <div class="item-title">主风机</div>
                    <template v-for="(fanState, key) in fanControlState2" :key="index">
                      <div class="padding-20">
                        <a-divider style="border-color: #1580cc; color: #49b3ff; font-weight: 600; font-size: 14px" orientation="left">{{
                          key
                        }}</a-divider>
                        <div class="data-group data-group1">
                          <div class="data-item" v-for="(item, key1) in fanState" :key="key1">
                            <div class="title">{{ key1 }}</div>
                            <div class="value" v-for="(obj, key2) in item" :key="key2">{{ obj.value }}</div>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="保护使能">
                <div class="detail-state">
                  <div class="detail-item">
                    <div class="item-title">主风机</div>
                    <div v-for="(item, key) in fanSetting1" :key="key" class="vent-flex-row-between detail-item-row">
                      <div>{{ item.title }}</div>
                      <div class="value">{{ item.value }}</div>
                    </div>
                  </div>
                  <div class="detail-item">
                    <div class="item-title">备风机</div>
                    <div v-for="(item, key) in fanSetting2" :key="key" class="vent-flex-row-between detail-item-row">
                      <div>{{ item.title }}</div>
                      <div class="value">{{ item.value }}</div>
                    </div>
                  </div>
                </div>
              </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';
  import {
    transformMobileH,
    transformMobileL,
    protectionEnableH,
    protectionEnableL,
    electricMonitor,
    electricState,
    fanControlState1,
    fanControlState2,
    fanSetting1,
    fanSetting2,
    data_model,
  } from '../fanLocal.data.ts';
  import { SvgPreview } from 'mky-svg';

  const emit = defineEmits(['close', 'register']);
  const props = defineProps({});
  const activeKey = ref('1');
  const activeBox = ref(3);
  // 注册 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';
  @import 'mky-svg/style.css';

  @ventSpace: zxm;
  .detail-box {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: space-between;

    .left-box {
      width: 800px;
      height: 100%;
      // height: initial;
      border-right: 1px solid #ffffff22;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      margin-right: 10px;
    }
    .right-box {
      flex: 1;
      height: 100%;
      .right-title {
        line-height: 60px;
        background: #ffffff11;
        margin-bottom: 2px;
        text-align: center;
        font-size: 20px;
        letter-spacing: 2px;
        color: #f0f0f0;
      }
      .detail-container {
        height: calc(100% - 60px);
        display: flex;
        justify-content: space-between;

        .detail-control {
          width: 300px;
          height: initial;
          display: flex;
          flex-direction: column;
          background: #ffffff11;
          margin-right: 10px;
          padding: 10px;
          .control-item {
          }
        }
        .right-detail-box {
          flex: 1;
          background: #ffffff11;
          padding-bottom: 40px;
          .detail-state {
            width: 100%;
            display: flex;
            justify-content: space-between;
          }
          .detail-item {
            flex: 1;
            padding: 0 40px;
            color: #fff;
            .item-title {
              line-height: 60px;
              font-size: 24px;
              text-align: center;
            }
            .detail-item-row {
              padding: 10px 0;
            }
          }
        }
      }
      .value {
        color: #00eefffe;
      }
    }
  }

  .data-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20px 8px 20px;
    color: #fff;
    .data-item {
      width: calc(50% - 20px);
      display: flex;
      justify-content: space-between;
      line-height: 24px;
      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
      margin: 4px 0;
    }
    .value {
      color: #00eefffe;
    }
    .data-item1 {
      width: 100%;
      line-height: 24px;
      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
      margin: 4px 0;
    }
  }
  .data-group1 {
    .data-item {
      width: calc(100% - 20px);
      .title {
        width: 80px;
      }
    }
  }
  .padding-20 {
    padding: 20px;
  }
  .tabs-box {
    width: 100%;
  }
  :deep(.@{ventSpace}-tabs-nav) {
    padding: 0 20px;
  }
</style>