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

<template>group
  <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" v-if="activeBox!=3">
            <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">
                      <span> 1#注氮机</span>
                      <span style="color:red">停机</span>
                    </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">
                      <span> 2#注氮机</span>
                      <span style="color:red">停机</span>
                    </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">
                      <span>高压侧</span>
                    </div>
                    <template v-for="(fanState, key) in shifTing" :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-group2 data-group3">
                          <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">
                      <span>低压侧</span>
                    </div>
                    <template v-for="(fanState, key) in shifTing1 " :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="3" tab="注氮馈电"></a-tab-pane>
              <a-tab-pane key="4" 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 class="btn-box">
              <a-button style="margin-left:10px" size="small" v-for="(btn, ind) in btnList" :key="ind"
                preIcon="ant-design:upload-outlined" type="primary">{{ btn.name }}</a-button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>

import { onMounted, reactive, 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 '../../fanLocalMonitor/fanLocal.data'
import { SvgPreview } from 'mky-svg'

const emit = defineEmits(['close', 'register'])
const props = defineProps({
  // detailTitle:{
  //   type:String,
  //   default:''
  //   }

})
//btn列表
let btnList = reactive([
  { name: "1#注氮一键启停" },
  { name: "2#注氮一键启停" }
])

//1#注氮列表数据
let fanControlState1 = reactive({
  空压机: {
    '空压机排气压力': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'Kpa',
      },
    ],
    '空压机排气温度': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '­°C',
      },
    ],
    '空压机运行时间': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'h',
      },
    ],
    '空压机加载时间': [
      {
        code: '',
        value: 55.0,
      },
      {
        code: '',
        value: 'h',
      },
    ],
  },
  流量: {
    '累计流量': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'm³',
      },
    ],
    '瞬时流量': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'm³/h',
      },
    ],
  },
  其他: {
    膜前温度: [
      {
        code: '',
        value: 0,
      },
      {
        code: '',
        value: '­°C',
      },
    ],
    氮气纯度: [
      {
        code: '',
        value: 0,
      },
      {
        code: '',
        value: '­%',
      },
    ],
  },
})

//2#注氮列表
let fanControlState2 = reactive({
  空压机: {
    '空压机排气压力': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'Kpa',
      },
    ],
    '空压机排气温度': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '­°C',
      },
    ],
    '空压机运行时间': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'h',
      },
    ],
    '空压机加载时间': [
      {
        code: '',
        value: 55.0,
      },
      {
        code: '',
        value: 'h',
      },
    ],
  },
  流量: {
    '累计流量': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'm³',
      },
    ],
    '瞬时流量': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: 'm³/h',
      },
    ],
  },
  其他: {
    膜前温度: [
      {
        code: '',
        value: 0,
      },
      {
        code: '',
        value: '­°C',
      },
    ],
    氮气纯度: [
      {
        code: '',
        value: 0,
      },
      {
        code: '',
        value: '­%',
      },
    ],
  },
})


//移变-高压
let shifTing = reactive({
  状态: {
    '运行状态': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '合闸命令返回': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '上位分闸': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '额定电流': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '上位复位': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '控制方式': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '电流': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '系统电压': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '短路电流整定': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '过载电流整定': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '过载电流': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '短路电流': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '温度': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '电度高位': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '电度低位': [
      {
        code: '',
        value: 55.0,
      },

    ],
    '上位合闸': [
      {
        code: '',
        value: 55.0,
      },

    ],
  },
  投撤: {
    '高压零序电压投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压差动投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压瓦斯闭锁投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压断相投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],

    '高压风电闭锁投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压失压投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压过载投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高、低压联锁1投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压短路投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高、低压联锁2投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压机电闭锁投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压腔盖闭锁投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '高压相不平衡投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    ' 铁芯接地保护投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    ' 高压欠压投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    ' 高压零序电流投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
    ' 高压温度投撤': [
      {
        code: '',
        value: 0.0,
      },

    ],
  },

})
//移变-低压
let shifTing1 = reactive({
  状态: {
    '运行状态': [
      {
        code: '',
        value: 0,
      },
    ],
    '上位复位': [
      {
        code: '',
        value: 0.0,
      },
    ],
    '短路电流整定': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '短路电流': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '额定电流': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '过载电流整定': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '漏电电阻': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '电流': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '过载电流': [
      {
        code: '',
        value: 0.0,
      },

    ],
    '系统电压': [
      {
        code: '',
        value: 0.0,
      },

    ],
  },
  投撤: {
    '低压欠压投撤': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '',
      },
    ],


    '低压漏电投撤': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '',
      },
    ],
    '低压过载投撤': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '',
      },
    ],
    '低压过压投撤': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '',
      },
    ],




    '低压短路投撤': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '',
      },
    ],


    '低压相不平衡投撤': [
      {
        code: '',
        value: 0.0,
      },
      {
        code: '',
        value: '',
      },
    ],

  },

})



const activeKey = ref('1')
const activeBox = ref(3)
// 注册 modal
const [register, { closeModal }] = useModalInner();

//tab选项切换
const tabChange = (key) => {
  activeKey.value = key
  console.log(activeKey, '--------------------')
  switch (key) {
    case '1':
      btnList = [
        { name: "1#注氮一键启停" },
        { name: "2#注氮一键启停" }

      ]
      break;
    case '2':
      btnList = [
        { name: '高压分闸' },
        { name: '高压合闸' },
        { name: '高压复位' },
        { name: '低压复位' },
        { name: '漏电测试' },

      ]
      break;
    case '3':
      btnList = [
        { name: '分闸' },
        { name: '合闸' },
        { name: '复位' },


      ]
      break;
    case '4':

      break;
  }

}

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 {
      position: relative;
      // height: calc(100% - 60px);
      height: 100%;
      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%;
          height: 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;
          }
        }

        .btn-box {
          position: absolute;
          top: 0px;
          right: 18px;
          height: 46px;
          line-height: 46px;
        }

      }
    }

    .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-group2 {
  height: calc(100% - 54px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px 8px 10px;
  color: #fff;
  overflow-y: auto;

  .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 {
      display: flex;
      flex: 1;
      height: 100%;
      justify-content: flex-start;
    }

    .value {
      display: flex;
      flex: 1;
      height: 100%;
      justify-content: flex-end;
    }

  }
}
.data-group3 {
  .data-item {
    width: calc(50% - 10px);

    .title {
      display: flex;
      flex: 2;
      height: 100%;
      justify-content: flex-start;
    }

    .value {
      display: flex;
      flex: 1;
      height: 100%;
      justify-content: flex-end;
    }

  }
}

.padding-20 {
  height: calc(50% - 30px);
  padding: 10px;
  box-sizing: border-box;
}

.tabs-box {
  width: 100%;
  height: 100%;
}

:deep(.@{ventSpace}-tabs-nav) {
  padding: 0 20px;
}
::v-deep .zxm-tabs-content{
  display: flex;
  width: 100%;
  height: 100%;
}
</style>