gasInjection-project/src/views/vent/gas/gasPumpMonitor/components/monitor.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="monitor-container">
    <div class="lr left-box">
      <ventBox1>
        <template #title>
          <div>抽采泵信息</div>
        </template>
        <template #container>
          <BaseTab :tabs="pumpSelection" v-model:id="activedPumpID" />
          <List v-bind="pumpListProp" />
        </template>
      </ventBox1>
      <ventBox1 class="vent-margin-t-10">
        <template #title>
          <div>泵站环境</div>
        </template>
        <template #container>
          <List v-bind="pumpStationListProp">
            <template #title></template>
          </List>
        </template>
      </ventBox1>
    </div>
    <CategoryBoard v-bind="pumpCategoryProp" />
    <div class="lr right-box">
      <div class="item-box sensor-container">
        <ventBox1>
          <template #title>
            <div>自动模式</div>
          </template>
          <template #container>
            <div class="flex justify-between mt-10px mb-10px">
              <Button @click="reverseModalVisible = true">一键倒机</Button>
              <Button @click="switchModalVisible = true">一键启停</Button>
            </div>
            <List icon="pump" title="抽放泵" layout="double-columns" type="status-light" :label-width="80" v-bind="pumpStatusProp" />
            <List icon="water-pump" title="水泵" layout="double-columns" type="status-light" :label-width="80" v-bind="waterPumpStatusProp" />
            <List icon="gas-pump" title="高负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="HPumpStatusProp" />
            <List icon="gas-pump" title="低负压配气泵" layout="double-columns" type="status-light" :label-width="80" v-bind="LPumpStatusProp" />
          </template>
        </ventBox1>
      </div>
    </div>
    <ConfirmModal v-model:visible="reverseModalVisible">
      <SvgIcon class="icon" size="34" name="warning-icon-gas" />
      <span> 是否进行一键倒机 </span>
    </ConfirmModal>
    <ConfirmModal v-model:visible="switchModalVisible">
      <SvgIcon class="icon" size="34" name="warning-icon-gas" />
      <span> 是否进行一键启停 </span>
    </ConfirmModal>
  </div>
</template>

<script setup lang="ts" name="gas-pump-monitor">
  import _ from 'lodash-es';
  import { ref, defineProps, computed } from 'vue';
  import ventBox1 from '/@/components/vent/ventBox1.vue';
  import List from '@/views/vent/gas/components/list/index.vue';
  import BaseTab from '@/views/vent/gas/components/tab/baseTab.vue';
  import Button from '@/views/vent/gas/components/form/button.vue';
  import CategoryBoard from '@/views/vent/gas/components/board/categoryBoard.vue';
  import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal.vue';
  import { SvgIcon } from '/@/components/Icon';
  import {
    pumpListConfig,
    pumpStationListConfig,
    pumpStatusConfig,
    waterPumpStatusConfig,
    HPumpStationListItems,
    LPumpStationListItems,
    statusConfig,
    HPumpCategoryConfig,
    LPumpCategoryConfig,
  } from '../gasPumpMonitor.data';

  const props = defineProps({
    device: {
      type: Object,
      default: () => {},
      require: true,
    },
  });

  // 抽放泵模块的Tab相关
  const pumpSelection = ref([
    { name: 't1', id: 1 },
    { name: 't2', id: 2 },
    { name: 't3', id: 3 },
    { name: 't4', id: 4 },
  ]);
  const activedPumpID = ref(1);

  // const pump = ref({});
  // 将列表配置项转换为列表可用的prop
  function transConfigToProp(config, source) {
    return config.map((c) => {
      return {
        ...c,
        value: _.get(c.prop, source),
        label: c.label,
      };
    });
  }

  // 各个模块的配置项
  const pumpListProp = computed(() => {
    return {
      items: transConfigToProp(pumpListConfig, props.device),
    };
  });
  const pumpStationListProp = computed(() => {
    return {
      items: transConfigToProp(pumpStationListConfig, props.device),
    };
  });
  const pumpStatusProp = computed(() => {
    return {
      status: statusConfig as any,
      items: transConfigToProp(pumpStatusConfig, props.device),
    };
  });
  const waterPumpStatusProp = computed(() => {
    return {
      status: statusConfig as any,
      items: transConfigToProp(waterPumpStatusConfig, props.device),
    };
  });
  const HPumpStatusProp = computed(() => {
    return {
      status: statusConfig as any,
      items: transConfigToProp(HPumpStationListItems, props.device),
    };
  });
  const LPumpStatusProp = computed(() => {
    return {
      status: statusConfig as any,
      items: transConfigToProp(LPumpStationListItems, props.device),
    };
  });

  // 告示板相关字段
  const pumpCategoryProp = computed(() => {
    return {
      categoryTop: transConfigToProp(HPumpCategoryConfig, props.device),
      categoryButtom: transConfigToProp(LPumpCategoryConfig, props.device),
    };
  });

  // 模态框相关
  const reverseModalVisible = ref(false);
  const switchModalVisible = ref(false);
</script>

<style lang="less" scoped>
  @import '@/views/vent/monitorManager/comment/less/workFace.less';
  @ventSpace: zxm;
  @tab-bg: #10427a;
  @tab-pane-bg: #166ab5;
  @tab-pane-border: #2cb6ff;

  .pump__tabs {
    font-weight: bold;
    background-color: @tab-bg;
    border-radius: 5px 5px 0 0;
  }

  .pump__tabs_pane_actived {
    background-color: @tab-pane-bg;
    border-radius: 5px 5px 0 0;
    border-bottom: 5px solid @tab-pane-border;
  }
</style>