hvac-web/src/views/env-monitor/EnvMonitor.vue

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { message } from 'ant-design-vue';

import ButtonTabs from '@/components/ButtonTabs.vue';
import LineChart from '@/components/LineChart.vue';
import SvgIcon from '@/components/SvgIcon.vue';
import { useRequest } from '@/hooks/request';
import { t } from '@/i18n';
import {
  addMonitorPoint,
  addRegion,
  deleteMonitorPoint,
  getDeviceGroupList,
  getDeviceListSimple,
  getGroupRegions,
  getMonitorPointInfo,
  getPageList,
  getRegionsPointsData,
  queryDevicesList,
  regionDelete,
  regionUpdate,
  updateMonitorPoint,
  updateRegionMonitorPoint,
} from '@/api';
import { HumitureType } from '@/constants';

import envMonitorBgc from '@/assets/img/env-monitor-bgc.png';

import type { CSSProperties } from 'vue';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';
import type {
  DeviceGroup,
  DeviceGroupItem,
  DeviceParams,
  DevicesListItem,
  GroupRegions,
  MonitoringForm,
  MonitoringPointData,
  OutdooForm,
  RegionNameList,
  RegionsPointsItem,
} from '@/types';

interface EnvMonitorStyle {
  background: string;
  backgroundSize: string;
}

const oneDeviceGroup = ref<DeviceGroup[]>([]);
const twoDeviceGroup = ref<DeviceGroup[]>([]);

const gradeOne = ref<number | undefined>(undefined);
const gradeTwo = ref<number | undefined>(undefined);
const monitoringPointOpen = ref<boolean>(false);
const outdoorOpen = ref<boolean>(false);
const regionNameOpen = ref<boolean>(false);
const regionName = ref<string>('');
const groupRegions = ref<GroupRegions[]>([]);
const titleRegions = ref<boolean>(true);
const titleMonitoring = ref<boolean>(true);
const deviceGroup = ref<DeviceGroupItem[]>([]);
const returnDevicesList = ref<DevicesListItem[]>([]);
const supplyDevicesList = ref<DevicesListItem[]>([]);
const outdoorDevicesList = ref<DevicesListItem[]>([]);
const returnDeviceParamsList = ref<DeviceParams[]>([]);
const supplyDeviceParamsList = ref<DeviceParams[]>([]);
const outdoorDeviceParamsList = ref<DeviceParams[]>([]);

const monitoringPointData = ref<MonitoringPointData[]>([]);
const regionNameList = ref<RegionNameList[]>([]);
const regionList = ref<RegionsPointsItem[]>([]);
const selectId = ref<number>(0);

const monitoringId = ref<number>();

const formRef = ref<FormInstance>();

const envMonitorStyle = ref<EnvMonitorStyle>({
  background: `url(${envMonitorBgc})`,
  backgroundSize: 'cover',
});

const monitoringForm = ref<MonitoringForm>({
  name: '',
  tempHumidityControlMode: '2',
  regionId: undefined,
  returnDevGroupId: undefined,
  returnDevId: undefined,
  returnTempParamCode: '',
  returnHumidityParamCode: '',
  supplyDevGroupId: undefined,
  supplyTempParamCode: '',
  supplyHumidityParamCode: '',
  tempUpper: 0,
  tempLower: 0,
  tempPreset: 0,
  humidityUpper: 0,
  humidityLower: 0,
  humidityPreset: 0,
});

const outdooForm = ref<OutdooForm>({
  regionId: undefined,
  outsideDevGroupId: undefined,
  outsideDevId: undefined,
  outsideTempParamCode: '',
  outsideHumidityParamCode: '',
  outsideEnthalpyParamCode: '',
});

const headerStyle: CSSProperties = {
  borderBottom: 0,
  padding: '16px 16px 0 24px',
};

const footerStyle: CSSProperties = {
  borderTop: 0,
  padding: '16px 24px',
};

const rules: Record<string, Rule[]> = {
  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  regionId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  returnDevGroupId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  returnDevId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  returnTempParamCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  returnHumidityParamCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  supplyDevGroupId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  supplyDevId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  supplyTempParamCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
  supplyHumidityParamCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
};

const { handleRequest } = useRequest();

const getGroupRegionsList = () => {
  console.log(gradeTwo.value);
  handleRequest(async () => {
    if (gradeTwo.value) {
      groupRegions.value = await getGroupRegions(gradeTwo.value);
    }
  });
};

const regionNameOk = () => {
  if (!regionName.value) {
    return message.warning('请输入区域名称');
  }
  handleRequest(async () => {
    if (gradeTwo.value && regionName.value) {
      if (titleRegions.value) {
        await addRegion({
          devGroupId: gradeTwo.value,
          regionName: regionName.value,
        });
      } else {
        await regionUpdate({
          id: monitoringForm.value.regionId,
          devGroupId: gradeTwo.value,
          regionName: regionName.value,
        });
      }
      getGroupRegionsList();
      regionNameOpen.value = false;
    }
  });
};

const regionNameDelete = () => {
  if (!regionName.value) {
    return message.warning('请输入区域名称');
  }
  handleRequest(async () => {
    if (monitoringForm.value.regionId) {
      await regionDelete(monitoringForm.value.regionId);
      monitoringForm.value.regionId = undefined;
      getGroupRegionsList();
      regionNameOpen.value = false;
    }
  });
};

const addRegionName = () => {
  titleRegions.value = true;
  regionNameOpen.value = true;
  regionName.value = '';
};

const addRegionList = (value: SelectValue, option: DefaultOptionType) => {
  regionName.value = option.regionName;
};

const editingRegionName = () => {
  if (monitoringForm.value.regionId) {
    titleRegions.value = false;
    regionNameOpen.value = true;
  } else {
    return message.warning('请选择区域名称');
  }
};

const addMonitoringPoint = () => {
  titleMonitoring.value = true;
  monitoringPointOpen.value = true;
};
const addAllGatewayList = (value: number) => {
  handleRequest(async () => {
    const data = await getDeviceGroupList({
      parentId: value,
    });
    if (data.length) {
      if (value === -1) {
        oneDeviceGroup.value = data;
        gradeOne.value = data[0].id;
      } else {
        twoDeviceGroup.value = data;
        gradeTwo.value = data[0].id;
      }
    }
  });
};

const getRegionsPointsList = (value: number) => {
  monitoringPointData.value = [];
  regionNameList.value = [];

  handleRequest(async () => {
    const data = await getRegionsPointsData(value);

    if (data.length) {
      data.forEach((item) => {
        const { id, regionName } = item;
        if (item.points.length) {
          monitoringPointData.value.push(...item.points);
        }

        regionNameList.value.push({
          name: regionName,
          id,
        });
      });
      if (data[0].id) {
        selectId.value = data[0].id;
      }
    }
  });
};

const obtainRegionsPointsData = (value: number) => {
  handleRequest(async () => {
    regionList.value = await getRegionsPointsData(value);
  });
};

const adddDeviceGroup = (value: SelectValue, option: DefaultOptionType, judgment: number) => {
  getDevicesGroupList(option.id, judgment);
};

const adddDevice = (value: SelectValue, option: DefaultOptionType, judgment: number) => {
  getDeviceParamsList(option.id, judgment);
};

const getDeviceParamsList = (id: number, judgment: number) => {
  handleRequest(async () => {
    const data = await getDeviceListSimple(id);

    if (judgment === HumitureType.ReturnAir) {
      returnDeviceParamsList.value = data;
      monitoringForm.value.returnHumidityParamCode = '';
      monitoringForm.value.returnTempParamCode = '';
    } else if (judgment === HumitureType.SupplyAir) {
      supplyDeviceParamsList.value = data;
      monitoringForm.value.supplyHumidityParamCode = '';
      monitoringForm.value.supplyTempParamCode = '';
    } else if (judgment === HumitureType.Outdoor) {
      outdoorDeviceParamsList.value = data;
      outdooForm.value.outsideEnthalpyParamCode = '';
      outdooForm.value.outsideHumidityParamCode = '';
      outdooForm.value.outsideTempParamCode = '';
    }
  });
};

const getDevicesGroupList = (id: number, judgment: number) => {
  handleRequest(async () => {
    const { records } = await queryDevicesList({
      pageIndex: 1,
      pageSize: 99999,
      groupId: id,
    });
    if (judgment === HumitureType.ReturnAir) {
      returnDevicesList.value = records;
      monitoringForm.value.returnDevId = undefined;
      monitoringForm.value.returnHumidityParamCode = '';
      monitoringForm.value.returnTempParamCode = '';
    } else if (judgment === HumitureType.SupplyAir) {
      supplyDevicesList.value = records;
      monitoringForm.value.supplyDevId = undefined;
      monitoringForm.value.supplyHumidityParamCode = '';
      monitoringForm.value.supplyTempParamCode = '';
    } else if (judgment === HumitureType.Outdoor) {
      outdoorDevicesList.value = records;
      outdooForm.value.outsideDevId = undefined;
      outdooForm.value.outsideEnthalpyParamCode = '';
      outdooForm.value.outsideHumidityParamCode = '';
      outdooForm.value.outsideTempParamCode = '';
    }
  });
};
const deleteMonitoringPoint = () => {
  if (!titleMonitoring.value) {
    handleRequest(async () => {
      if (monitoringId.value) {
        await deleteMonitorPoint(monitoringId.value);
      }
    });
  }

  monitoringPointOpen.value = false;
};

const saveMonitoringPoint = () => {
  formRef.value
    ?.validate()
    .then(() => {
      handleRequest(async () => {
        if (titleMonitoring.value) {
          await addMonitorPoint(monitoringForm.value);
        } else {
          await updateMonitorPoint(monitoringForm.value);
        }
        if (gradeTwo.value) {
          getRegionsPointsList(gradeTwo.value);
        }
        monitoringPointOpen.value = false;
      });
    })
    .catch(() => {});
};

const getDeviceGroup = () => {
  handleRequest(async () => {
    deviceGroup.value = await getPageList();
  });
};

const offDrawer = () => {
  monitoringPointOpen.value = false;
};

const selectClick = (id: number) => {
  selectId.value = id;
};

const editorClick = (monitoringPointId: number) => {
  handleRequest(async () => {
    const {
      humidityLower,
      humidityPreset,
      humidityUpper,
      name,
      regionId,
      returnDevGroupId,
      returnDevId,
      returnHumidityParamCode,
      returnTempParamCode,
      supplyDevGroupId,
      supplyDevId,
      supplyHumidityParamCode,
      supplyTempParamCode,
      tempHumidityControlMode,
      tempLower,
      tempPreset,
      tempUpper,
      id,
    } = await getMonitorPointInfo(monitoringPointId);
    Object.assign(monitoringForm.value, {
      humidityLower,
      humidityPreset,
      humidityUpper,
      name,
      regionId,
      returnDevGroupId,
      returnDevId,
      returnHumidityParamCode,
      returnTempParamCode,
      supplyDevGroupId,
      supplyDevId,
      supplyHumidityParamCode,
      supplyTempParamCode,
      tempHumidityControlMode: String(tempHumidityControlMode),
      tempLower,
      tempPreset,
      tempUpper,
      id,
    });
    monitoringId.value = id;
    getDevicesGroupList(returnDevGroupId, HumitureType.ReturnAir);
    getDevicesGroupList(supplyDevGroupId, HumitureType.SupplyAir);

    getDeviceParamsList(returnDevId, HumitureType.ReturnAir);
    getDeviceParamsList(supplyDevId, HumitureType.SupplyAir);

    titleMonitoring.value = false;
    monitoringPointOpen.value = true;
  });
};

const addOutdoorDrawer = () => {
  outdoorOpen.value = true;
  regionList.value.forEach((item) => {
    const {
      outsideEnthalpyParamCode,
      outsideHumidityParamCode,
      outsideTempParamCode,
      outsideDevGroupId,
      outsideDevId,
      id,
    } = item;
    if (item.id === selectId.value) {
      Object.assign(outdooForm.value, {
        outsideEnthalpyParamCode,
        outsideHumidityParamCode,
        outsideTempParamCode,
        outsideDevGroupId,
        outsideDevId,
        regionId: id,
      });
      if (outsideDevGroupId) {
        getDevicesGroupList(outsideDevGroupId, HumitureType.Outdoor);
      }

      if (outsideDevId) {
        getDeviceParamsList(outsideDevId, HumitureType.Outdoor);
      }
    }
  });
};

const saveOutdoo = () => {
  handleRequest(async () => {
    await updateRegionMonitorPoint(outdooForm.value);
    if (gradeTwo.value) {
      obtainRegionsPointsData(gradeTwo.value);
    }

    outdoorOpen.value = false;
  });
};

const offOutdoorDrawer = () => {
  outdoorOpen.value = false;
};

watch(
  () => gradeOne.value,
  (count) => {
    if (count) {
      addAllGatewayList(count);
    }
  },
);

watch(
  () => gradeTwo.value,
  (count) => {
    if (count) {
      getRegionsPointsList(count);
      obtainRegionsPointsData(count);
      getGroupRegionsList();
    }
  },
);

onMounted(() => {
  addAllGatewayList(-1);
  getDeviceGroup();
});
</script>

<template>
  <div>
    <AFlex justify="space-between">
      <AFlex align="center">
        <div class="text-top">环境监控</div>
        <ASelect
          class="select-width select-monitoring"
          v-model:value="gradeOne"
          :options="oneDeviceGroup"
          :field-names="{ label: 'groupName', value: 'id' }"
          placeholder="请选择"
        />
        <ASelect
          class="select-width"
          v-model:value="gradeTwo"
          :options="twoDeviceGroup"
          :field-names="{ label: 'groupName', value: 'id' }"
          placeholder="请选择"
        />
      </AFlex>

      <div>
        <AButton class="icon-button default-button">
          <AFlex align="center">
            <SvgIcon name="plus" />
            <span>切换到列表显示 </span>
          </AFlex>
        </AButton>
        <AButton type="primary" class="icon-button button-monitoring" @click="addMonitoringPoint">
          <AFlex align="center">
            <SvgIcon name="plus" />
            <span> 添加检测点 </span>
          </AFlex>
        </AButton>
      </div>
    </AFlex>

    <div class="content-monitoring">
      <div class="content-monitoring-top">123</div>
      <AFlex class="content-monitoring-canvas">
        <div class="content-monitoring-canvas-left">
          <div v-for="item in monitoringPointData" :key="item.id">
            <LineChart :data="item" @editorClick="editorClick" />
          </div>
        </div>

        <AFlex :style="envMonitorStyle" class="monitoring-img">
          <AFlex v-if="regionList.length" align="center" class="list-regions">
            <ButtonTabs
              :data="regionNameList"
              :select-id="selectId"
              :width="'75px'"
              :radius="'16px'"
              :tooltip="true"
              @selectClick="selectClick"
            />
          </AFlex>
          <div v-if="regionList.length" class="canvas-div">
            <AFlex justify="space-between" class="canvas-div-top">
              <AButton class="icon-button" @click="addOutdoorDrawer">
                <SvgIcon name="outdoor" />
                22.9℃｜60.6%
              </AButton>
              <AFlex>
                <AFlex justify="center" align="center" class="button-icon">
                  <SvgIcon name="edit-o" />
                </AFlex>
                <AFlex justify="center" align="center" class="button-icon">
                  <SvgIcon name="copy" />
                </AFlex>
              </AFlex>
            </AFlex>
            <div class="canvas-content">
              <AButton class="icon-button icon-button-margin">
                <SvgIcon name="outdoor" />
                22.9℃｜60.6%
              </AButton>
            </div>
          </div>
        </AFlex>
      </AFlex>
    </div>

    <ADrawer
      width="600"
      :open="monitoringPointOpen"
      :closable="false"
      class="drawer-monitoring"
      :header-style="headerStyle"
      :footer-style="footerStyle"
    >
      <template #title>{{ titleMonitoring ? '添加检测点' : '编辑监测点' }} </template>
      <template #extra>
        <SvgIcon class="off-icon" @click="offDrawer" name="close" />
      </template>
      <AForm ref="formRef" class="form-ref" :model="monitoringForm" layout="vertical" :rules="rules">
        <AFormItem name="name">
          <AInput v-model:value="monitoringForm.name" class="input-wdith region-bottom" placeholder="请输入" />
        </AFormItem>
        <AFormItem label="区域" name="regionId">
          <AFlex align="center">
            <ASelect
              class="input-wdith"
              v-model:value="monitoringForm.regionId"
              :options="groupRegions"
              :field-names="{ label: 'regionName', value: 'id' }"
              placeholder="请选择"
              @change="addRegionList"
            />

            <div @click="editingRegionName">
              <AFlex justify="center" align="center" class="button-flex">
                <SvgIcon name="edit-o" />
              </AFlex>
            </div>
            <div @click="addRegionName">
              <AFlex justify="center" align="center" class="button-flex button-plus">
                <SvgIcon name="plus" />
              </AFlex>
            </div>
          </AFlex>
        </AFormItem>
        <ARadioGroup v-model:value="monitoringForm.tempHumidityControlMode" class="radio-group">
          <ARadio value="2">回风控制</ARadio>
          <ARadio value="1">送风控制</ARadio>
        </ARadioGroup>
        <AFlex justify="space-between">
          <div>
            <AFormItem class="form-item" label="回风温湿度仪表" name="returnDevGroupId">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.returnDevGroupId"
                :options="twoDeviceGroup"
                :field-names="{ label: 'groupName', value: 'id' }"
                placeholder="请选择"
                @change="(value, option) => adddDeviceGroup(value, option, HumitureType.ReturnAir)"
              />
            </AFormItem>
            <AFormItem name="returnDevId">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.returnDevId"
                :options="returnDevicesList"
                :field-names="{ label: 'deviceName', value: 'id' }"
                placeholder="请选择"
                @change="(value, option) => adddDevice(value, option, HumitureType.ReturnAir)"
              />
            </AFormItem>

            <AFormItem name="returnTempParamCode">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.returnTempParamCode"
                :options="returnDeviceParamsList"
                :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
                placeholder="请选择"
              />
            </AFormItem>
            <AFormItem name="returnHumidityParamCode">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.returnHumidityParamCode"
                :options="returnDeviceParamsList"
                :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
                placeholder="请选择"
              />
            </AFormItem>
          </div>
          <div>
            <AFormItem label="送风温湿度仪表" name="supplyDevGroupId">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.supplyDevGroupId"
                :options="twoDeviceGroup"
                :field-names="{ label: 'groupName', value: 'id' }"
                placeholder="请选择"
                @change="(value, option) => adddDeviceGroup(value, option, HumitureType.SupplyAir)"
              />
            </AFormItem>
            <AFormItem name="supplyDevId">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.supplyDevId"
                :options="supplyDevicesList"
                :field-names="{ label: 'deviceName', value: 'id' }"
                placeholder="请选择"
                @change="(value, option) => adddDevice(value, option, HumitureType.SupplyAir)"
              />
            </AFormItem>

            <AFormItem name="supplyTempParamCode">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.supplyTempParamCode"
                :options="supplyDeviceParamsList"
                :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
                placeholder="请选择"
              />
            </AFormItem>
            <AFormItem name="supplyHumidityParamCode">
              <ASelect
                class="input-wdith"
                v-model:value="monitoringForm.supplyHumidityParamCode"
                :options="supplyDeviceParamsList"
                :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
                placeholder="请选择"
              />
            </AFormItem>
          </div>
        </AFlex>

        <AFlex justify="space-between">
          <div>
            <AFormItem label="室内温度配置">
              <AFlex align="center">
                <AInputNumber class="input-number-width" v-model:value="monitoringForm.tempUpper" :min="0" :max="999" />
                <div class="configure-text">上限值</div>
              </AFlex>
            </AFormItem>
            <AFormItem>
              <AFlex align="center">
                <AInputNumber class="input-number-width" v-model:value="monitoringForm.tempLower" :min="0" :max="999" />
                <div class="configure-text">下限值</div>
              </AFlex>
            </AFormItem>
            <AFormItem>
              <AFlex align="center">
                <AInputNumber
                  class="input-number-width"
                  v-model:value="monitoringForm.tempPreset"
                  :min="0"
                  :max="999"
                />
                <div class="configure-text">限定值</div>
              </AFlex>
            </AFormItem>
          </div>
          <div>
            <AFormItem label="室内湿度配置">
              <AFlex align="center">
                <AInputNumber
                  class="input-number-width"
                  v-model:value="monitoringForm.humidityUpper"
                  :min="0"
                  :max="999"
                />
                <div class="configure-text">上限值</div>
              </AFlex>
            </AFormItem>
            <AFormItem>
              <AFlex align="center">
                <AInputNumber
                  class="input-number-width"
                  v-model:value="monitoringForm.humidityLower"
                  :min="0"
                  :max="999"
                />
                <div class="configure-text">下限值</div>
              </AFlex>
            </AFormItem>
            <AFormItem>
              <AFlex align="center">
                <AInputNumber
                  class="input-number-width"
                  v-model:value="monitoringForm.humidityPreset"
                  :min="0"
                  :max="999"
                />
                <div class="configure-text">限定值</div>
              </AFlex>
            </AFormItem>
          </div>
        </AFlex>
      </AForm>
      <template #footer>
        <AFlex justify="flex-end" :gap="16">
          <AButton class="default-button" @click="deleteMonitoringPoint">删除</AButton>
          <AButton type="primary" @click="saveMonitoringPoint">保存</AButton>
        </AFlex>
      </template>
    </ADrawer>

    <ADrawer
      class="drawer-monitoring"
      width="304"
      :open="outdoorOpen"
      :closable="false"
      :header-style="headerStyle"
      :footer-style="footerStyle"
    >
      <template #title>室外温湿度</template>
      <template #extra>
        <SvgIcon class="off-icon" @click="offOutdoorDrawer" name="close" />
      </template>
      <AForm ref="formOutdoorRef" :model="outdooForm" layout="vertical">
        <AFormItem label="室外温湿度仪表" name="outsideDevGroupId">
          <ASelect
            class="input-wdith"
            v-model:value="outdooForm.outsideDevGroupId"
            :options="twoDeviceGroup"
            :field-names="{ label: 'groupName', value: 'id' }"
            placeholder="请选择"
            @change="(value, option) => adddDeviceGroup(value, option, HumitureType.Outdoor)"
          />
        </AFormItem>
        <AFormItem name="outsideDevId">
          <ASelect
            class="input-wdith"
            v-model:value="outdooForm.outsideDevId"
            :options="outdoorDevicesList"
            :field-names="{ label: 'deviceName', value: 'id' }"
            placeholder="请选择"
            @change="(value, option) => adddDevice(value, option, HumitureType.Outdoor)"
          />
        </AFormItem>
        <AFormItem name="outsideTempParamCode">
          <ASelect
            class="input-wdith"
            v-model:value="outdooForm.outsideTempParamCode"
            :options="outdoorDeviceParamsList"
            :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
            placeholder="请选择"
          />
        </AFormItem>
        <AFormItem name="outsideHumidityParamCode">
          <ASelect
            class="input-wdith"
            v-model:value="outdooForm.outsideHumidityParamCode"
            :options="outdoorDeviceParamsList"
            :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
            placeholder="请选择"
          />
        </AFormItem>
        <AFormItem name="outsideEnthalpyParamCode">
          <ASelect
            class="input-wdith"
            v-model:value="outdooForm.outsideEnthalpyParamCode"
            :options="outdoorDeviceParamsList"
            :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
            placeholder="请选择"
          />
        </AFormItem>
      </AForm>
      <template #footer>
        <AFlex justify="flex-end" :gap="16">
          <AButton type="primary" @click="saveOutdoo">保存</AButton>
        </AFlex>
      </template>
    </ADrawer>

    <AModal
      v-model:open="regionNameOpen"
      :title="titleRegions ? '添加区域' : '编辑区域'"
      :footer="null"
      width="460px"
      :mask-closable="false"
      :keyboard="false"
    >
      <div class="region-name">区域名</div>
      <AInput v-model:value="regionName" placeholder="请输入" />

      <AFlex justify="flex-end" class="region-name-top">
        <AButton v-if="!titleRegions" class="default-button" @click="regionNameDelete">{{
          $t('common.delete')
        }}</AButton>
        <AButton class="default-button cancel-button" @click="regionNameOpen = false">{{
          $t('common.cancel')
        }}</AButton>
        <AButton type="primary" @click="regionNameOk">{{ $t('common.confirm') }}</AButton>
      </AFlex>
    </AModal>
  </div>
</template>

<style lang="scss" scoped>
.icon-button-margin {
  margin: 16px 0 0 16px;
}

.canvas-div-top {
  margin-bottom: 16px;
  margin-left: 16px;
}

.canvas-div {
  width: 820px;
}

.button-icon {
  width: 32px;
  height: 32px;
  margin-left: 12px;
  font-size: 16px;
  color: var(--antd-color-primary);
  cursor: pointer;
  background: #fff;
  border: 1px solid #32bac0;
  border-radius: 4px;
}

.canvas-content {
  width: 820px;
  height: 660px;
  background: #f5f7fa;
  border: 1px solid var(--antd-color-primary);
  border-radius: 12px;
}

.list-regions {
  height: 100%;
  margin-right: 16px;
}

.content-monitoring-canvas-left {
  width: 260px;
  padding-right: 30px;
  padding-bottom: 24px;
  overflow: hidden;
  overflow: hidden auto; /* 隐藏水平滚动条 */ /* 只显示垂直滚动条 */
}

.monitoring-img {
  width: 100%;
  height: 100%;
}

.content-monitoring-canvas {
  height: calc(100% - 45px);
  padding-top: 24px;
}

.content-monitoring-top {
  height: 40px;
}

.drawer-monitoring .form-ref .ant-form-item .ant-form-item-label > label {
  color: #666;
}

.configure-text {
  margin-left: 12px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  color: #666;
  text-align: left;
}

.radio-group {
  margin: 8px 0 24px;
}

.region-bottom {
  margin-bottom: 8px;
}

.drawer-monitoring .ant-form-item {
  margin-bottom: 16px;
}

.input-number-width {
  width: 192px;
  margin-bottom: 16px;
}

.segmented-monitoring {
  width: 196px;
  margin-bottom: 24px;
}

.off-icon {
  cursor: pointer;
}

.cancel-button {
  margin: 0 16px;
}

.region-name-top {
  margin-top: 40px;
}

.region-name {
  margin-top: 16px;
  margin-bottom: 5px;
  color: #666;
}

.button-plus {
  margin-left: 12px !important;
  font-size: 16px;
}

.button-flex {
  width: 32px;
  height: 32px;
  margin-left: 16px;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.input-wdith {
  width: 256px;
}

.button-monitoring {
  margin-left: 16px;
}

.content-monitoring {
  height: calc(100vh - 85px);

  // min-height: 100%;
  padding: 24px 0 0 24px; // 上、右、下、左
  margin-top: 16px;

  // overflow: hidden;
  background-color: #fff;
  border-radius: 16px;
}

.select-monitoring {
  margin-right: 16px;
  margin-left: 32px;
}

.select-width {
  width: 192px;
}

.text-top {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  color: rgb(0 0 0 / 85%);
  text-align: left;
}
</style>