mky-vent-base/src/views/vent/deviceManager/comment/DeviceModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    width="1300px"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    :destroyOnClose="true"
    :mask-closable="false"
    @cancel="closeModalFn"
  >
    <a-tabs v-if="props.showTab" v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="基本信息" force-render>
        <FormModal :deviceType="deviceType" :record="deviceData" @save-or-update="(values) => emit('saveOrUpdate', values)" />
      </a-tab-pane>
      <!-- <a-tab-pane key="10" v-if="deviceType == 'fanlocal' || deviceType == 'fanmain'" tab="风机曲线" force-render>
        <FanLineModal :record="deviceData" />
      </a-tab-pane> -->
      <a-tab-pane key="11" tab="报表录入">
        <DeviceReportInfo v-if="activeKey == '11'" />
      </a-tab-pane>
      <a-tab-pane key="2" :tab="deviceType === 'gate' ? '监测点位关联' : '点表关联'">
        <PointTable
          :columns="pointColumns"
          :pointType="deviceData.strtype"
          :deviceId="deviceData.id"
          :valuetype="9"
          @save="savePointData"
          @delete="deletePointById"
        />
      </a-tab-pane>
      <a-tab-pane key="15" tab="控制点位关联">
        <CtrlTable :deviceId="deviceData.id" :deviceType="deviceData.strtype" />
      </a-tab-pane>
      <a-tab-pane key="8" tab="虚拟点表配置">
        <PointTable
          :columns="simulationColumns"
          :pointType="deviceData.strtype"
          :deviceId="deviceData.id"
          :valuetype="4"
          @save="savePointData"
          @delete="deletePointById"
        />
      </a-tab-pane>
      <a-tab-pane key="3" tab="关联设备" v-if="deviceType == 'managesys'">
        <WorkFacePointTable :columns="linkColumns" :deviceId="deviceData.id" @save="savePointData" @delete="deletePointById" />
      </a-tab-pane>
      <a-tab-pane key="12" tab="关联报表" v-if="deviceType == 'managesys'">
        <WorkFaceReportTable :columns="reportColumns" :device="deviceData" />
      </a-tab-pane>
      <a-tab-pane v-if="deviceType == 'managesys'" key="4" tab="预警条目管理">
        <ManagerWarningDeviceTable v-if="activeKey == '4'" :deviceId="deviceData.id" />
      </a-tab-pane>
      <a-tab-pane key="5" :tab="deviceType !== 'managesys' ? '点位(报警)配置' : '配置预警设备'">
        <template v-if="activeKey == '5'">
          <WarningTable v-if="deviceType !== 'managesys'" :deviceId="deviceData.id" :pointType="deviceData.strtype" />
          <BackWindDeviceTable v-else :deviceId="deviceData.id" />
        </template>
      </a-tab-pane>
      <a-tab-pane v-if="deviceType == 'managesys'" key="6" tab="配置控制设备">
        <template v-if="activeKey == '6'">
          <WarningTable v-if="deviceType !== 'managesys'" :deviceId="deviceData.id" :pointType="deviceData.strtype" />
          <ManagerWarningTable v-else :deviceId="deviceData.id" />
        </template>
      </a-tab-pane>
      <a-tab-pane v-if="deviceType == 'managesys'" key="14" tab="配置预警解除后控制设备">
        <template v-if="activeKey == '14'">
          <ManagerWarningTable :deviceId="deviceData.id" :monitor-type="3" />
        </template>
      </a-tab-pane>
      <a-tab-pane key="7" tab="摄像头配置">
        <EditRowTable
          :columns="cameraColumns"
          :list="cameraList"
          :params="{ deviceid: deviceData.id }"
          @save-or-update="saveCameraData"
          @delete-by-id="deleteCameraById"
          :isAdd="true"
        />
      </a-tab-pane>
      <a-tab-pane key="9" :tab="'预案管理'">
        <AccidentPlanTable :deviceId="deviceData.id" />
      </a-tab-pane>
      <a-tab-pane v-if="deviceType == 'led'" key="10" :tab="'节目管理'">
        <LEDPlaylistTable :deviceId="deviceData.id" />
      </a-tab-pane>

      <a-tab-pane key="13" :tab="'故障配置管理'">
        <FaultConfigTable :deviceId="deviceData.id" />
      </a-tab-pane>

      <!-- <a-tab-pane key="9" tab="预警指标修改">
        <template v-if="activeKey == '9'">
        <editWarnTable></editWarnTable>
        </template>
      </a-tab-pane> -->
    </a-tabs>
    <FormModal v-else :record="record" @save-or-update="(values) => emit('saveOrUpdate', values)" />
  </BasicModal>
</template>
<script lang="ts" setup>
import { computed, unref, inject, reactive, ref, watch } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import EditRowTable from '../../comment/EditRowTable.vue';
import PointTable from './pointTabel/PointTable.vue';
import WarningTable from './warningTabel/index.vue';
import ManagerWarningTable from './warningTabel/index1.vue';
import ManagerWarningDeviceTable from './warningTabel/index2.vue';
import BackWindDeviceTable from './warningTabel/index3.vue';
import AccidentPlanTable from './warningTabel/index4.vue';
import LEDPlaylistTable from './warningTabel/index5.vue';
import WorkFacePointTable from './pointTabel/WorkFacePointTable.vue';
import CtrlTable from './warningTabel/ctrlTable.vue';
import WorkFaceReportTable from './pointTabel/WorkFaceReportTable.vue';
import DeviceReportInfo from './DeviceReportInfo.vue';
import FaultConfigTable from './faultConfigTable/index.vue';
// import editWarnTable from './editWarnTable/index.vue'
import FanLineModal from './FanLineModal .vue';
import FormModal from './FormModal.vue';
import { cloneDeep } from 'lodash-es';
import { columns as pointColumns, workFaceColumns, simulationColumns, reportColumns } from './pointTabel/point.data';
import { saveOrUpdate as pointSaveOrUpdate, deleteById as pointDeleteById } from './pointTabel/point.api';
import { columns as cameraColumns } from './cameraTabel/camera.data';

import { list as cameraList, saveOrUpdate as cameraSaveOrUpdate, deleteById as cameraDeleteById } from './cameraTabel/camera.api';

const props = defineProps({
  showTab: { type: Boolean, required: true },
  // deviceType: { type: String },
});
// 声明Emits
const emit = defineEmits(['saveOrUpdate', 'register', 'closeModal']);
const isUpdate = inject('isUpdate');
const deviceData = inject('formData') as any;
const deviceType = inject('deviceType') as any;
const record = reactive({});
const activeKey = ref('1');
const linkColumns = ref<any[]>([]);

//表单赋值
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //重置表单
  setModalProps({ confirmLoading: false });
  Object.assign(deviceData, data.record);
  // 判断是否是关键阻力路线
});

//设置标题
const title = computed(() => {
  if (!unref(isUpdate)) {
    if (deviceData.strname || deviceData.systemname) {
      return `新增（${deviceData.strname || deviceData.systemname}）`;
    }
    return `新增`;
  } else {
    if (deviceData['strtype'] == 'sys_majorpath') {
      linkColumns.value = [
        ...workFaceColumns,
        ...[
          {
            title: '是否在关键通风路线上',
            width: 100,
            dataIndex: 'pathflag',
            edit: true,
            editComponent: 'Switch',
            editValueMap: (value) => {
              return value ? '是' : '否';
            },
          },
          {
            title: '传感器类型',
            width: 100,
            dataIndex: 'sensorType',
            edit: true,
            editComponent: 'Select',
            editComponentProps: {
              options: [
                {
                  label: '多参',
                  value: '1',
                },
                {
                  label: '测风',
                  value: '2',
                },
              ],
            },
          },
          {
            title: '风向',
            width: 100,
            dataIndex: 'winddir',
            edit: true,
            editComponent: 'Select',
            editComponentProps: {
              options: [
                {
                  label: '进风',
                  value: '1',
                },
                {
                  label: '用风',
                  value: '2',
                },
                {
                  label: '回风',
                  value: '3',
                },
              ],
            },
          },
          {
            title: '是否总风量',
            width: 100,
            dataIndex: 'windflag',
            edit: true,
            editComponent: 'Switch',
            editValueMap: (value) => {
              return value ? '是' : '否';
            },
          },
          {
            title: '路线名称',
            width: 100,
            dataIndex: 'des',
            edit: true,
            editComponent: 'Input',
          },
          {
            title: ' 阻力值',
            width: 100,
            dataIndex: 'testDrag',
            edit: true,
            editComponent: 'InputNumber',
          },
        ],
      ];
    } else {
      linkColumns.value = [...workFaceColumns];
    }
    if (deviceData.strname || deviceData.systemname) {
      return `编辑（${deviceData.strname || deviceData.systemname}）`;
    }
    return `编辑`;
  }
});

const closeModalFn = () => {
  activeKey.value = '1';
  closeModal();
  emit('closeModal');
};

const savePointData = (data) => {
  const record = cloneDeep(data.editValueRefs);
  pointSaveOrUpdate(Object.assign(record, { id: data.id, deviceId: deviceData.id }), data.id);
};
const saveCameraData = (data: any, reload: Function) => {
  cameraSaveOrUpdate(Object.assign({ ...data }, { id: data.id, deviceid: deviceData.id }), data.id);
};
const deletePointById = (id, reload) => {
  pointDeleteById({ id: id }, reload);
};
const deleteCameraById = (id, reload) => {
  cameraDeleteById({ id: id }, reload);
};
</script>
<style scoped lang="less">
::v-deep .suffix {
  height: 32px;
  line-height: 32px;
  margin-left: 5px;
  color: #fff;
}
</style>