mky-vent-base/src/views/vent/gas/gasPipeNet/index.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="gas-pipe-net">
    <CustomHeader> 瓦斯管网监控系统 </CustomHeader>
    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
      <VentModal />
    </div>

    <ModuleCommon
      v-for="cfg in moduleConfigs"
      :key="cfg.deviceType"
      :show-style="cfg.showStyle"
      :module-data="cfg.moduleData"
      :module-name="cfg.moduleName"
      :device-type="cfg.deviceType"
      :data="pumpDataSource"
      :visible="true"
      :style="{ zIndex: 1 }"
    />
    <div class="scene-box">
      <div class="bottom-tabs-box" @mousedown="setDivHeight($event, 175, scroll, 0)">
        <DvBorderBox8 class="dv_border_8 p-5px" :dur="5" :style="{ height: `${scroll.y + 128}px` }">
          <a-tabs class="tabs-box" v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="瓦斯管道监测">
              <GasPipeTable :scroll="scroll" @locate="goLocation($event)" />
            </a-tab-pane>
            <!-- <a-tab-pane key="2" tab="瓦斯网络解算" disabled> 1212312312313321 </a-tab-pane> -->
            <a-tab-pane key="2" tab="管道阀门监控">
              <MonitorTable
                columnsType="gasvalve_monitor"
                :dataSource="gasValveDataSource"
                design-scope="device_monitor"
                :isShowActionColumn="true"
                :isShowSelect="false"
                title="设备监测"
                :scroll="{ y: scroll.y - 30 }"
              >
                <template #action="{ record }">
                  <TableAction
                    :actions="[
                      {
                        label: '控制',
                        onClick: () => controlHandler(record),
                      },
                      {
                        label: '定位',
                        onClick: goLocation.bind(null, record),
                      },
                    ]"
                  />
                </template>
                <template #filterCell="{ column, record }">
                  <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
                    {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
                  >
                  <template v-else-if="column.dataIndex === 'warnLevel'">
                    <a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '103'" color="#FF5812">较大风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '104'" color="#FF5812">重大风险</a-tag>
                    <a-tag v-else-if="record.warnLevel == '201'" color="#FF0000">报警</a-tag>
                    <a-tag v-else-if="record.warnLevel == '10000'" color="#FF5812">数据超限</a-tag>
                    <a-tag v-else-if="record.warnLevel == '1001'" color="default">网络中断</a-tag>
                    <a-tag v-else color="green">正常</a-tag>
                  </template>
                  <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
                    record.netStatus == '0' ? '断开' : '连接'
                  }}</a-tag>
                </template>
              </MonitorTable>
            </a-tab-pane>
          </a-tabs>
        </DvBorderBox8>
      </div>
    </div>
    <BasicModal @register="registerModal" @ok="submitHandler">
      <BasicForm @register="registerForm" />
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import CustomHeader from '/@/components/vent/customHeader.vue';
  import { setDivHeight } from '/@/utils/event';
  import { onMounted, ref, nextTick } from 'vue';
  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
  import ModuleCommon from '../../home/configurable/components/ModuleCommon.vue';
  import { moduleConfigs } from './gasPipeNet.data';
  import GasPipeTable from '../../monitorManager/comment/GasPipeTable.vue';
  import MonitorTable from '../../monitorManager/comment/MonitorTable.vue';
  import VentModal from '/@/components/vent/micro/ventModal.vue';
  import { getTableList, list } from './gasPipeNet.api';
  import { get } from 'lodash-es';
  import { getActions } from '/@/qiankun/state';
  import { TableAction } from '/@/components/Table';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { message } from 'ant-design-vue';

  const scroll = ref<{ x: true; y: number }>({ x: true, y: 202 });
  const activeKey = ref('1');

  const pumpDataSource = ref<any[]>([]);
  const gasValveDataSource = ref<any[]>([]);

  async function getSysDataSource() {
    const res = await getTableList({ strtype: 'sys_gaspipenet', pagetype: 'normal' });

    const { deviceInfo } = await list({ devicetype: 'sys', systemID: get(res, 'records[0].id', ''), type: 'all' });

    pumpDataSource.value = get(deviceInfo, 'pump', { datalist: [] });
    gasValveDataSource.value = get(deviceInfo, 'gasvalve.datalist', []).map((e) => {
      return Object.assign(e, e.readData);
    });
  }

  const actions = getActions();

  function goLocation(record) {
    // debugger;
    actions.setGlobalState({ locationId: record.deviceID, locationObj: null, pageObj: null });
  }

  const [registerModal, { openModal, closeModal }] = useModal();
  const [registerForm, { setFieldsValue, validate }] = useForm({
    showActionButtonGroup: false,
    schemas: [
      {
        label: '开度',
        component: 'Input',
        field: 'degree',
      },
      {
        label: '密码',
        component: 'InputPassword',
        field: 'pwd',
        required: true,
      },
    ],
  });

  function submitHandler() {
    validate().then((val) => {
      message.success('VAL:' + JSON.stringify(val));
      closeModal();
    });
  }

  function controlHandler(record) {
    openModal();
    nextTick(() => {
      setFieldsValue(record);
    });
  }

  onMounted(() => {
    getSysDataSource();
  });
</script>

<style scoped lang="less">
  @import '/@/design/theme.less';
  @import '/@/design/vent/modal.less';

  // @{theme-deepblue} {
  //   .gas-pipe-net {
  //   }
  // }

  .gas-pipe-net {
    width: 100%;
    height: 100%;
  }
</style>