|
|
@@ -82,6 +82,7 @@ const outdoorOpen = ref<boolean>(false);
|
|
|
const regionNameOpen = ref<boolean>(false);
|
|
|
const monitoringDataOpen = ref<boolean>(false);
|
|
|
const regionCopyOpen = ref<boolean>(false);
|
|
|
+
|
|
|
const regionName = ref<string>('');
|
|
|
const regionNameEditor = ref<string>('');
|
|
|
const groupRegions = ref<GroupRegions[]>([]);
|
|
|
@@ -110,7 +111,6 @@ const formRef = ref<FormInstance>();
|
|
|
const listDisplay = ref<boolean>(true);
|
|
|
const timeList = ref<TimeList[]>([]);
|
|
|
const timeLineIndex = ref<number>(0);
|
|
|
-const monitoringPointList = ref<MonitoringPointData[]>([]);
|
|
|
const chooseTime = ref<string>();
|
|
|
const alarmHistoryList = ref<AlarmHistoryItem[]>([]);
|
|
|
|
|
|
@@ -217,7 +217,7 @@ const regionNameOk = () => {
|
|
|
}
|
|
|
}
|
|
|
getGroupRegionsList();
|
|
|
- getRegionsPointsList(gradeTwo.value);
|
|
|
+ getRegionsPointsList(gradeTwo.value, false);
|
|
|
|
|
|
regionNameOpen.value = false;
|
|
|
}
|
|
|
@@ -235,7 +235,7 @@ const regionNameDelete = () => {
|
|
|
getGroupRegionsList();
|
|
|
|
|
|
if (gradeTwo.value) {
|
|
|
- getRegionsPointsList(gradeTwo.value);
|
|
|
+ getRegionsPointsList(gradeTwo.value, false);
|
|
|
}
|
|
|
|
|
|
regionNameOpen.value = false;
|
|
|
@@ -289,14 +289,27 @@ const addAllGatewayList = (value: number) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
-const getRegionsPointsList = (value: number) => {
|
|
|
+const { isLoading, handleRequest: handleEnvMonitorRequest } = useRequest();
|
|
|
+
|
|
|
+const getRegionsPointsList = (value: number, show: boolean) => {
|
|
|
monitoringPointData.value = [];
|
|
|
regionNameList.value = [];
|
|
|
monitoringList.value = [];
|
|
|
copyToRegionId.value = undefined;
|
|
|
|
|
|
- handleRequest(async () => {
|
|
|
- const data = await getRegionsPointsData(value);
|
|
|
+ handleEnvMonitorRequest(async () => {
|
|
|
+ let data: RegionsPointsItem[] = [];
|
|
|
+ if (show) {
|
|
|
+ if (chooseTime.value) {
|
|
|
+ data = await getRegionsPointsValue(value, {
|
|
|
+ endTime: `${getCurrentDate()} ${chooseTime.value.length > 6 ? chooseTime.value : chooseTime.value + ':00'}`,
|
|
|
+ });
|
|
|
+
|
|
|
+ regionList.value = data;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ data = await getRegionsPointsData(value);
|
|
|
+ }
|
|
|
|
|
|
if (data.length) {
|
|
|
data.forEach((item) => {
|
|
|
@@ -326,6 +339,12 @@ const getRegionsPointsList = (value: number) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const confirmTimeLine = () => {
|
|
|
+ if (gradeTwo.value) {
|
|
|
+ getRegionsPointsList(gradeTwo.value, true);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
const obtainRegionsPointsData = (value: number) => {
|
|
|
handleRequest(async () => {
|
|
|
regionList.value = await getRegionsPointsData(value);
|
|
|
@@ -448,7 +467,7 @@ const deleteMonitoringPoint = () => {
|
|
|
if (monitoringId.value) {
|
|
|
await deleteMonitorPoint(monitoringId.value);
|
|
|
if (gradeTwo.value) {
|
|
|
- getRegionsPointsList(gradeTwo.value);
|
|
|
+ getRegionsPointsList(gradeTwo.value, false);
|
|
|
timeLineIndex.value = timeList.value.length - 1;
|
|
|
}
|
|
|
closeModal();
|
|
|
@@ -471,7 +490,7 @@ const saveMonitoringPoint = () => {
|
|
|
await updateMonitorPoint(monitoringForm.value);
|
|
|
}
|
|
|
if (gradeTwo.value) {
|
|
|
- getRegionsPointsList(gradeTwo.value);
|
|
|
+ getRegionsPointsList(gradeTwo.value, false);
|
|
|
obtainRegionsPointsData(gradeTwo.value);
|
|
|
}
|
|
|
closeModal();
|
|
|
@@ -730,6 +749,7 @@ const generateTimeArray = async () => {
|
|
|
// 关键步骤：数据更新后刷新滚动
|
|
|
await nextTick();
|
|
|
timeLineIndex.value = timeList.value.length - 1;
|
|
|
+ chooseTime.value = getCurrentTime();
|
|
|
// 关键修复：延迟确保渲染完成
|
|
|
setTimeout(() => {
|
|
|
returnCurrently();
|
|
|
@@ -757,7 +777,7 @@ const getAlarmHistoryList = () => {
|
|
|
|
|
|
for (const aItem of timeList.value) {
|
|
|
const aStart = parseTimeToMinutes(aItem.time);
|
|
|
- const aEnd = aStart + 12;
|
|
|
+ const aEnd = aStart + 10;
|
|
|
|
|
|
// 区间重叠判断（左闭右开）
|
|
|
const isOverlap = triggerStart < aEnd && recoverEnd >= aStart;
|
|
|
@@ -793,9 +813,19 @@ const returnCurrently = () => {
|
|
|
bs?.scrollTo(-maxScrollX, 0, 800);
|
|
|
}
|
|
|
timeLineIndex.value = timeList.value.length - 1;
|
|
|
+ chooseTime.value = getCurrentTime();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+// 获取当前日期（格式：HH:mm）
|
|
|
+const getCurrentTime = () => {
|
|
|
+ const now = new Date();
|
|
|
+ const hours = String(now.getHours()).padStart(2, '0'); // 补零的小时（0~23）
|
|
|
+ const minutes = String(now.getMinutes()).padStart(2, '0'); // 补零的分钟（0~59）
|
|
|
+ const seconds = String(now.getSeconds()).padStart(2, '0'); // 补零的秒（0~59）
|
|
|
+ return `${hours}:${minutes}:${seconds}`;
|
|
|
+};
|
|
|
+
|
|
|
const addTimeLine = (value: TimeList) => {
|
|
|
chooseTime.value = value.time;
|
|
|
timeLineIndex.value = value.index;
|
|
|
@@ -810,43 +840,6 @@ const getCurrentDate = () => {
|
|
|
return `${year}-${month}-${day}`;
|
|
|
};
|
|
|
|
|
|
-const confirmTimeLine = () => {
|
|
|
- handleRequest(async () => {
|
|
|
- if (gradeTwo.value) {
|
|
|
- if (chooseTime.value) {
|
|
|
- monitoringPointList.value = await getRegionsPointsValue(gradeTwo.value, {
|
|
|
- endTime: `${getCurrentDate()} ${chooseTime.value}:00`,
|
|
|
- });
|
|
|
- if (monitoringPointList.value.length) {
|
|
|
- mergeData();
|
|
|
- monitoringPointData.value = monitoringPointList.value;
|
|
|
- monitoringId.value = monitoringPointData.value[0].id;
|
|
|
- selectId.value = monitoringPointData.value[0].regionId;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-// 合并逻辑
|
|
|
-const mergeData = () => {
|
|
|
- // 将 monitoringPointData 转换为 Map 以便快速查找（Key 为 id）
|
|
|
- const aMap = new Map(monitoringPointData.value.map((item) => [item.id, item]));
|
|
|
-
|
|
|
- // 遍历 monitoringPointList 并更新数据
|
|
|
- monitoringPointList.value = monitoringPointList.value.map((itemB) => {
|
|
|
- const matchedItemA = aMap.get(itemB.id);
|
|
|
- // 如果 monitoringPointData 中存在相同 id，合并数据（保留其他属性）
|
|
|
- return matchedItemA
|
|
|
- ? {
|
|
|
- ...itemB,
|
|
|
- humidityData: matchedItemA.humidityData,
|
|
|
- tempData: matchedItemA.tempData,
|
|
|
- }
|
|
|
- : itemB;
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
// 注册鼠标滚轮插件
|
|
|
BScroll.use(MouseWheel);
|
|
|
|
|
|
@@ -891,9 +884,11 @@ watch(
|
|
|
(count) => {
|
|
|
if (count) {
|
|
|
getAlarmHistoryList();
|
|
|
- getRegionsPointsList(count);
|
|
|
+ getRegionsPointsList(count, false);
|
|
|
obtainRegionsPointsData(count);
|
|
|
getGroupRegionsList();
|
|
|
+ timeLineIndex.value = timeList.value.length - 1;
|
|
|
+ chooseTime.value = getCurrentTime();
|
|
|
}
|
|
|
},
|
|
|
);
|
|
|
@@ -992,664 +987,672 @@ const copyAreaCanvas = () => {
|
|
|
|
|
|
<template>
|
|
|
<div>
|
|
|
- <AFlex justify="space-between">
|
|
|
- <AFlex align="center">
|
|
|
- <div class="text-top">{{ $t('navigation.envMonitor') }}</div>
|
|
|
- <div v-show="listDisplay">
|
|
|
- <ASelect
|
|
|
- class="select-width select-monitoring"
|
|
|
- v-model:value="gradeOne"
|
|
|
- :options="oneDeviceGroup"
|
|
|
- :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- />
|
|
|
- <ASelect
|
|
|
- class="select-width"
|
|
|
- v-model:value="gradeTwo"
|
|
|
- :options="twoDeviceGroup"
|
|
|
- :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </AFlex>
|
|
|
+ <ASpin :spinning="isLoading">
|
|
|
+ <AFlex justify="space-between">
|
|
|
+ <AFlex align="center">
|
|
|
+ <div class="text-top">{{ $t('navigation.envMonitor') }}</div>
|
|
|
+ <div v-show="listDisplay">
|
|
|
+ <ASelect
|
|
|
+ class="select-width select-monitoring"
|
|
|
+ v-model:value="gradeOne"
|
|
|
+ :options="oneDeviceGroup"
|
|
|
+ :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ />
|
|
|
+ <ASelect
|
|
|
+ class="select-width"
|
|
|
+ v-model:value="gradeTwo"
|
|
|
+ :options="twoDeviceGroup"
|
|
|
+ :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </AFlex>
|
|
|
|
|
|
- <div>
|
|
|
- <AButton class="icon-button default-button" @click="switchDisplay">
|
|
|
- <AFlex align="center">
|
|
|
- <SvgIcon name="switch" />
|
|
|
- <span>{{ listDisplay ? $t('envMonitor.listDisplay') : $t('envMonitor.cardDisplay') }} </span>
|
|
|
- </AFlex>
|
|
|
- </AButton>
|
|
|
- <AButton type="primary" class="icon-button button-monitoring" @click="addMonitoringPoint">
|
|
|
- <AFlex align="center">
|
|
|
- <SvgIcon name="plus" />
|
|
|
- <span> {{ $t('envMonitor.addInspectionPoints') }} </span>
|
|
|
- </AFlex>
|
|
|
- </AButton>
|
|
|
- </div>
|
|
|
- </AFlex>
|
|
|
-
|
|
|
- <div class="content-monitoring" v-show="listDisplay">
|
|
|
- <AFlex class="content-monitoring-top" align="flex-end">
|
|
|
- <div class="scroll-wrapper" ref="scrollWrapper">
|
|
|
- <div class="scroll-content" ref="scrollContent">
|
|
|
- <AFlex align="flex-end" class="time-line">
|
|
|
- <div> </div>
|
|
|
-
|
|
|
- <div v-for="item in timeList" :key="item.time">
|
|
|
- <AFlex align="flex-end" :class="item.backgroundShow ? 'background-alarm' : 'background-default'">
|
|
|
- <AFlex :vertical="true">
|
|
|
- <div v-if="item.integral" class="time-style">{{ item.time }}</div>
|
|
|
- <div @click="addTimeLine(item)">
|
|
|
- <AFlex align="flex-end" class="integral-style">
|
|
|
- <AFlex
|
|
|
- :vertical="true"
|
|
|
- justify="center"
|
|
|
- align="center"
|
|
|
- v-if="item.index === timeLineIndex"
|
|
|
- class="confirm-axis-div"
|
|
|
- >
|
|
|
- <div class="confirm-axis-circle"></div>
|
|
|
- <div class="confirm-axis"></div>
|
|
|
- </AFlex>
|
|
|
- <div v-else :class="item.integral ? 'integral' : 'integral-height'"></div>
|
|
|
- </AFlex>
|
|
|
- </div>
|
|
|
- </AFlex>
|
|
|
- </AFlex>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <AButton class="icon-button default-button" @click="switchDisplay">
|
|
|
+ <AFlex align="center">
|
|
|
+ <SvgIcon name="switch" />
|
|
|
+ <span>{{ listDisplay ? $t('envMonitor.listDisplay') : $t('envMonitor.cardDisplay') }} </span>
|
|
|
</AFlex>
|
|
|
- </div>
|
|
|
+ </AButton>
|
|
|
+ <AButton type="primary" class="icon-button button-monitoring" @click="addMonitoringPoint">
|
|
|
+ <AFlex align="center">
|
|
|
+ <SvgIcon name="plus" />
|
|
|
+ <span> {{ $t('envMonitor.addInspectionPoints') }} </span>
|
|
|
+ </AFlex>
|
|
|
+ </AButton>
|
|
|
</div>
|
|
|
- <AFlex>
|
|
|
- <AButton type="text" class="return-currently" @click="returnCurrently">{{
|
|
|
- $t('envMonitor.returnCurrent')
|
|
|
- }}</AButton>
|
|
|
- <AButton type="primary" class="timeline-confirm" @click="confirmTimeLine">{{ $t('common.confirm') }}</AButton>
|
|
|
- </AFlex>
|
|
|
</AFlex>
|
|
|
- <AFlex class="content-monitoring-canvas">
|
|
|
- <div class="content-monitoring-canvas-left">
|
|
|
- <div v-for="item in monitoringPointData" :key="item.id" :data-point-id="item.id">
|
|
|
- <LineChart
|
|
|
- :data="item"
|
|
|
- :icon-show="true"
|
|
|
- :monitoring-id="monitoringId"
|
|
|
- @click="areaPreviewRef?.highlightCanvasPoint(item.id)"
|
|
|
- @editorClick="editorClick"
|
|
|
- @historicalDataClick="historicalDataClick"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <AFlex class="monitoring-img">
|
|
|
- <AFlex v-show="regionList.length" align="center" class="list-regions">
|
|
|
- <ButtonTabs
|
|
|
- :data="regionNameList"
|
|
|
- :select-id="selectId"
|
|
|
- :width="'75px'"
|
|
|
- :radius="'16px'"
|
|
|
- :tooltip="true"
|
|
|
- @selectClick="selectClick"
|
|
|
- />
|
|
|
- </AFlex>
|
|
|
- <div v-show="regionList.length" class="canvas-div">
|
|
|
- <AFlex justify="space-between" class="canvas-div-top">
|
|
|
- <AButton class="icon-button">
|
|
|
- <SvgIcon name="outdoor" />
|
|
|
- {{ currentAreaData?.outSideTemperature || '-' }}℃｜{{ currentAreaData?.outSideHumidity || '-' }}%
|
|
|
- </AButton>
|
|
|
- <AFlex>
|
|
|
- <div @click="areaEditorRef?.showView">
|
|
|
- <AFlex justify="center" align="center" class="button-icon">
|
|
|
- <SvgIcon name="edit-o" />
|
|
|
- </AFlex>
|
|
|
- </div>
|
|
|
- <div @click="copyRegion">
|
|
|
- <AFlex justify="center" align="center" class="button-icon">
|
|
|
- <SvgIcon name="copy" />
|
|
|
+ <div class="content-monitoring" v-show="listDisplay">
|
|
|
+ <AFlex class="content-monitoring-top" align="flex-end">
|
|
|
+ <div class="scroll-wrapper" ref="scrollWrapper">
|
|
|
+ <div class="scroll-content" ref="scrollContent">
|
|
|
+ <AFlex align="flex-end" class="time-line">
|
|
|
+ <div> </div>
|
|
|
+
|
|
|
+ <div v-for="item in timeList" :key="item.time">
|
|
|
+ <AFlex align="flex-end" :class="item.backgroundShow ? 'background-alarm' : 'background-default'">
|
|
|
+ <AFlex :vertical="true">
|
|
|
+ <div v-if="item.integral" class="time-style">{{ item.time }}</div>
|
|
|
+ <div @click="addTimeLine(item)">
|
|
|
+ <AFlex align="flex-end" class="integral-style">
|
|
|
+ <AFlex
|
|
|
+ :vertical="true"
|
|
|
+ justify="center"
|
|
|
+ align="center"
|
|
|
+ v-if="item.index === timeLineIndex"
|
|
|
+ class="confirm-axis-div"
|
|
|
+ >
|
|
|
+ <div class="confirm-axis-circle"></div>
|
|
|
+ <div class="confirm-axis"></div>
|
|
|
+ </AFlex>
|
|
|
+ <div v-else :class="item.integral ? 'integral' : 'integral-height'"></div>
|
|
|
+ </AFlex>
|
|
|
+ </div>
|
|
|
+ </AFlex>
|
|
|
</AFlex>
|
|
|
</div>
|
|
|
</AFlex>
|
|
|
- </AFlex>
|
|
|
- <div class="canvas-content">
|
|
|
- <AButton class="icon-button icon-button-margin home-temp-humidity-button">
|
|
|
- <SvgIcon name="home" />
|
|
|
- {{ currentAreaData?.avgTemperature || '-' }}℃｜{{ currentAreaData?.avgHumidity || '-' }}%
|
|
|
- </AButton>
|
|
|
- <AreaPreview
|
|
|
- v-if="regionList.length"
|
|
|
- ref="areaPreview"
|
|
|
- :area-data="currentAreaData"
|
|
|
- @highlight-env-point="highlightEnvPoint"
|
|
|
- />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <AFlex>
|
|
|
+ <AButton type="text" class="return-currently" @click="returnCurrently">{{
|
|
|
+ $t('envMonitor.returnCurrent')
|
|
|
+ }}</AButton>
|
|
|
+ <AButton type="primary" class="timeline-confirm" @click="confirmTimeLine">{{
|
|
|
+ $t('common.confirm')
|
|
|
+ }}</AButton>
|
|
|
+ </AFlex>
|
|
|
</AFlex>
|
|
|
- </AFlex>
|
|
|
- </div>
|
|
|
-
|
|
|
- <EnvMonitorList
|
|
|
- ref="envMonitorList"
|
|
|
- v-show="!listDisplay"
|
|
|
- :monitor-data="monitoringList"
|
|
|
- :monitoring-point-data="monitoringPointData"
|
|
|
- />
|
|
|
-
|
|
|
- <ADrawer
|
|
|
- width="600"
|
|
|
- :open="monitoringPointOpen"
|
|
|
- :closable="false"
|
|
|
- class="drawer-monitoring"
|
|
|
- :header-style="headerStyle"
|
|
|
- :footer-style="footerStyle"
|
|
|
- >
|
|
|
- <template #title
|
|
|
- >{{ titleMonitoring ? $t('envMonitor.addInspectionPoints') : $t('envMonitor.editorialMonitoringPoint') }}
|
|
|
- </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="$t('common.pleaseEnter')"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
- <AFormItem :label="$t('envMonitor.region')" name="regionId">
|
|
|
- <AFlex align="center">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.regionId"
|
|
|
- :options="groupRegions"
|
|
|
- :field-names="{ label: 'regionName', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- @change="addRegionList"
|
|
|
- />
|
|
|
-
|
|
|
- <div @click="editingRegionName">
|
|
|
- <AFlex justify="center" align="center" class="button-flex">
|
|
|
- <SvgIcon name="edit-o" />
|
|
|
- </AFlex>
|
|
|
+ <AFlex class="content-monitoring-canvas">
|
|
|
+ <div class="content-monitoring-canvas-left">
|
|
|
+ <div v-for="item in monitoringPointData" :key="item.id" :data-point-id="item.id">
|
|
|
+ <LineChart
|
|
|
+ :data="item"
|
|
|
+ :icon-show="true"
|
|
|
+ :monitoring-id="monitoringId"
|
|
|
+ @click="areaPreviewRef?.highlightCanvasPoint(item.id)"
|
|
|
+ @editorClick="editorClick"
|
|
|
+ @historicalDataClick="historicalDataClick"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div @click="addRegionName">
|
|
|
- <AFlex justify="center" align="center" class="button-flex button-plus">
|
|
|
- <SvgIcon name="plus" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <AFlex class="monitoring-img">
|
|
|
+ <AFlex v-show="regionList.length" align="center" class="list-regions">
|
|
|
+ <ButtonTabs
|
|
|
+ :data="regionNameList"
|
|
|
+ :select-id="selectId"
|
|
|
+ :width="'75px'"
|
|
|
+ :radius="'16px'"
|
|
|
+ :tooltip="true"
|
|
|
+ @selectClick="selectClick"
|
|
|
+ />
|
|
|
+ </AFlex>
|
|
|
+ <div v-show="regionList.length" class="canvas-div">
|
|
|
+ <AFlex justify="space-between" class="canvas-div-top">
|
|
|
+ <AButton class="icon-button">
|
|
|
+ <SvgIcon name="outdoor" />
|
|
|
+ {{ currentAreaData?.outSideTemperature || '-' }}℃｜{{ currentAreaData?.outSideHumidity || '-' }}%
|
|
|
+ </AButton>
|
|
|
+ <AFlex>
|
|
|
+ <div @click="areaEditorRef?.showView">
|
|
|
+ <AFlex justify="center" align="center" class="button-icon">
|
|
|
+ <SvgIcon name="edit-o" />
|
|
|
+ </AFlex>
|
|
|
+ </div>
|
|
|
+ <div @click="copyRegion">
|
|
|
+ <AFlex justify="center" align="center" class="button-icon">
|
|
|
+ <SvgIcon name="copy" />
|
|
|
+ </AFlex>
|
|
|
+ </div>
|
|
|
+ </AFlex>
|
|
|
</AFlex>
|
|
|
+ <div class="canvas-content">
|
|
|
+ <AButton class="icon-button icon-button-margin home-temp-humidity-button">
|
|
|
+ <SvgIcon name="home" />
|
|
|
+ {{ currentAreaData?.avgTemperature || '-' }}℃｜{{ currentAreaData?.avgHumidity || '-' }}%
|
|
|
+ </AButton>
|
|
|
+ <AreaPreview
|
|
|
+ v-if="regionList.length"
|
|
|
+ ref="areaPreview"
|
|
|
+ :area-data="currentAreaData"
|
|
|
+ @highlight-env-point="highlightEnvPoint"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</AFlex>
|
|
|
- </AFormItem>
|
|
|
- <AFormItem :label="t('envMonitor.humidityTemperatureControl')" name="tempHumidityControlMode">
|
|
|
- <ARadioGroup v-model:value="monitoringForm.tempHumidityControlMode" class="radio-group">
|
|
|
- <ARadio value="2">{{ $t('envMonitor.returnControl') }}</ARadio>
|
|
|
- <ARadio value="1">{{ $t('envMonitor.supplyControl') }}</ARadio>
|
|
|
- </ARadioGroup>
|
|
|
- </AFormItem>
|
|
|
-
|
|
|
- <AFlex justify="space-between">
|
|
|
- <div>
|
|
|
- <AFormItem class="form-item" :label="$t('envMonitor.returnTemperatureAndhumidity')" name="returnDevGroupId">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.returnDevGroupId"
|
|
|
- :options="twoDeviceGroup"
|
|
|
- :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- @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="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddDevice(value, option, HumitureType.ReturnAir)"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
+ </AFlex>
|
|
|
+ </div>
|
|
|
|
|
|
- <AFormItem name="returnTempParamCode">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.returnTempParamCode"
|
|
|
- :options="returnDeviceParamsList"
|
|
|
- :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
- <AFormItem name="returnHumidityParamCode">
|
|
|
+ <EnvMonitorList
|
|
|
+ ref="envMonitorList"
|
|
|
+ v-show="!listDisplay"
|
|
|
+ :monitor-data="monitoringList"
|
|
|
+ :monitoring-point-data="monitoringPointData"
|
|
|
+ />
|
|
|
+
|
|
|
+ <ADrawer
|
|
|
+ width="600"
|
|
|
+ :open="monitoringPointOpen"
|
|
|
+ :closable="false"
|
|
|
+ class="drawer-monitoring"
|
|
|
+ :header-style="headerStyle"
|
|
|
+ :footer-style="footerStyle"
|
|
|
+ >
|
|
|
+ <template #title
|
|
|
+ >{{ titleMonitoring ? $t('envMonitor.addInspectionPoints') : $t('envMonitor.editorialMonitoringPoint') }}
|
|
|
+ </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="$t('common.pleaseEnter')"
|
|
|
+ />
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem :label="$t('envMonitor.region')" name="regionId">
|
|
|
+ <AFlex align="center">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.returnHumidityParamCode"
|
|
|
- :options="returnDeviceParamsList"
|
|
|
- :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
+ v-model:value="monitoringForm.regionId"
|
|
|
+ :options="groupRegions"
|
|
|
+ :field-names="{ label: 'regionName', value: 'id' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
+ @change="addRegionList"
|
|
|
/>
|
|
|
- </AFormItem>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <AFormItem :label="$t('envMonitor.supplyTemperatureAndhumidity')" name="supplyDevGroupId">
|
|
|
+
|
|
|
+ <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>
|
|
|
+ <AFormItem :label="t('envMonitor.humidityTemperatureControl')" name="tempHumidityControlMode">
|
|
|
+ <ARadioGroup v-model:value="monitoringForm.tempHumidityControlMode" class="radio-group">
|
|
|
+ <ARadio value="2">{{ $t('envMonitor.returnControl') }}</ARadio>
|
|
|
+ <ARadio value="1">{{ $t('envMonitor.supplyControl') }}</ARadio>
|
|
|
+ </ARadioGroup>
|
|
|
+ </AFormItem>
|
|
|
+
|
|
|
+ <AFlex justify="space-between">
|
|
|
+ <div>
|
|
|
+ <AFormItem
|
|
|
+ class="form-item"
|
|
|
+ :label="$t('envMonitor.returnTemperatureAndhumidity')"
|
|
|
+ name="returnDevGroupId"
|
|
|
+ >
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.returnDevGroupId"
|
|
|
+ :options="twoDeviceGroup"
|
|
|
+ :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ @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="$t('common.plzSelect')"
|
|
|
+ @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="$t('common.plzSelect')"
|
|
|
+ />
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem name="returnHumidityParamCode">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.returnHumidityParamCode"
|
|
|
+ :options="returnDeviceParamsList"
|
|
|
+ :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ />
|
|
|
+ </AFormItem>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <AFormItem :label="$t('envMonitor.supplyTemperatureAndhumidity')" name="supplyDevGroupId">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.supplyDevGroupId"
|
|
|
+ :options="twoDeviceGroup"
|
|
|
+ :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ @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="$t('common.plzSelect')"
|
|
|
+ @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="$t('common.plzSelect')"
|
|
|
+ />
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem name="supplyHumidityParamCode">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.supplyHumidityParamCode"
|
|
|
+ :options="supplyDeviceParamsList"
|
|
|
+ :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ />
|
|
|
+ </AFormItem>
|
|
|
+ </div>
|
|
|
+ </AFlex>
|
|
|
+ <div v-if="monitoringForm.tempHumidityControlMode === '1'">
|
|
|
+ <AFormItem
|
|
|
+ class="form-item"
|
|
|
+ :label="t('envMonitor.newAirTemperatureAndHumidityMeter')"
|
|
|
+ name="outdoorDevGroupId"
|
|
|
+ >
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.supplyDevGroupId"
|
|
|
+ v-model:value="monitoringForm.outdoorDevGroupId"
|
|
|
:options="twoDeviceGroup"
|
|
|
:field-names="{ label: 'groupName', value: 'id' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddDeviceGroup(value, option, HumitureType.SupplyAir)"
|
|
|
+ @change="(value, option) => adddDeviceGroup(value, option, HumitureType.FreshAir)"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
- <AFormItem name="supplyDevId">
|
|
|
+ <AFormItem name="outdoorDevId">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.supplyDevId"
|
|
|
- :options="supplyDevicesList"
|
|
|
+ v-model:value="monitoringForm.outdoorDevId"
|
|
|
+ :options="freshDevicesList"
|
|
|
:field-names="{ label: 'deviceName', value: 'id' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddDevice(value, option, HumitureType.SupplyAir)"
|
|
|
+ @change="(value, option) => adddDevice(value, option, HumitureType.FreshAir)"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
|
|
|
- <AFormItem name="supplyTempParamCode">
|
|
|
+ <AFormItem name="outdoorTempParamCode">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.supplyTempParamCode"
|
|
|
- :options="supplyDeviceParamsList"
|
|
|
+ v-model:value="monitoringForm.outdoorTempParamCode"
|
|
|
+ :options="freshDeviceParamsList"
|
|
|
:field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
- <AFormItem name="supplyHumidityParamCode">
|
|
|
+ <AFormItem name="outdoorHumidityParamCode">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.supplyHumidityParamCode"
|
|
|
- :options="supplyDeviceParamsList"
|
|
|
+ v-model:value="monitoringForm.outdoorHumidityParamCode"
|
|
|
+ :options="freshDeviceParamsList"
|
|
|
:field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
</div>
|
|
|
- </AFlex>
|
|
|
- <div v-if="monitoringForm.tempHumidityControlMode === '1'">
|
|
|
- <AFormItem
|
|
|
- class="form-item"
|
|
|
- :label="t('envMonitor.newAirTemperatureAndHumidityMeter')"
|
|
|
- name="outdoorDevGroupId"
|
|
|
- >
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.outdoorDevGroupId"
|
|
|
- :options="twoDeviceGroup"
|
|
|
- :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddDeviceGroup(value, option, HumitureType.FreshAir)"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
- <AFormItem name="outdoorDevId">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.outdoorDevId"
|
|
|
- :options="freshDevicesList"
|
|
|
- :field-names="{ label: 'deviceName', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddDevice(value, option, HumitureType.FreshAir)"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
|
|
|
- <AFormItem name="outdoorTempParamCode">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.outdoorTempParamCode"
|
|
|
- :options="freshDeviceParamsList"
|
|
|
- :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
- <AFormItem name="outdoorHumidityParamCode">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.outdoorHumidityParamCode"
|
|
|
- :options="freshDeviceParamsList"
|
|
|
- :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- />
|
|
|
+ <AFlex>
|
|
|
+ <div class="spacing-right">
|
|
|
+ <AFormItem
|
|
|
+ :label="
|
|
|
+ monitoringForm.tempHumidityControlMode === '1'
|
|
|
+ ? $t('envMonitor.fanTemperatureSetting')
|
|
|
+ : $t('envMonitor.indoorTemperatureConfiguration')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <AFlex align="center">
|
|
|
+ <AInputNumber
|
|
|
+ class="input-number-width"
|
|
|
+ :placeholder="$t('common.pleaseEnter')"
|
|
|
+ v-model:value="monitoringForm.tempUpper"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ />
|
|
|
+ <div class="configure-text">{{ $t('envMonitor.upperLimitValue') }}</div>
|
|
|
+ </AFlex>
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem>
|
|
|
+ <AFlex align="center">
|
|
|
+ <AInputNumber
|
|
|
+ class="input-number-width"
|
|
|
+ :placeholder="$t('common.pleaseEnter')"
|
|
|
+ v-model:value="monitoringForm.tempLower"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ />
|
|
|
+ <div class="configure-text">{{ $t('envMonitor.lowerLimitValue') }}</div>
|
|
|
+ </AFlex>
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem>
|
|
|
+ <AFlex align="center">
|
|
|
+ <AInputNumber
|
|
|
+ class="input-number-width"
|
|
|
+ v-model:value="monitoringForm.tempPreset"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ :placeholder="$t('common.pleaseEnter')"
|
|
|
+ />
|
|
|
+ <div class="configure-text">{{ $t('envMonitor.limitValue') }}</div>
|
|
|
+ </AFlex>
|
|
|
+ </AFormItem>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <AFormItem
|
|
|
+ :label="
|
|
|
+ monitoringForm.tempHumidityControlMode === '1'
|
|
|
+ ? t('envMonitor.fanAirHumiditySetting')
|
|
|
+ : $t('envMonitor.indoorHumiditySetting')
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <AFlex align="center">
|
|
|
+ <AInputNumber
|
|
|
+ class="input-number-width"
|
|
|
+ v-model:value="monitoringForm.humidityUpper"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ :placeholder="$t('common.pleaseEnter')"
|
|
|
+ />
|
|
|
+ <div class="configure-text">{{ $t('envMonitor.upperLimitValue') }}</div>
|
|
|
+ </AFlex>
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem>
|
|
|
+ <AFlex align="center">
|
|
|
+ <AInputNumber
|
|
|
+ class="input-number-width"
|
|
|
+ v-model:value="monitoringForm.humidityLower"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ :placeholder="$t('common.pleaseEnter')"
|
|
|
+ />
|
|
|
+ <div class="configure-text">{{ $t('envMonitor.lowerLimitValue') }}</div>
|
|
|
+ </AFlex>
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem>
|
|
|
+ <AFlex align="center">
|
|
|
+ <AInputNumber
|
|
|
+ class="input-number-width"
|
|
|
+ v-model:value="monitoringForm.humidityPreset"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ :placeholder="$t('common.pleaseEnter')"
|
|
|
+ />
|
|
|
+ <div class="configure-text">{{ $t('envMonitor.limitValue') }}</div>
|
|
|
+ </AFlex>
|
|
|
+ </AFormItem>
|
|
|
+ </div>
|
|
|
+ </AFlex>
|
|
|
+ <AFormItem :label="t('envMonitor.monitoringPointStatusConfiguration')" name="runStatusFlag">
|
|
|
+ <ARadioGroup v-model:value="monitoringForm.runStatusFlag" class="radio-group">
|
|
|
+ <ARadio :value="0">{{ t('envMonitor.temperatureDifferenceJudgment') }}</ARadio>
|
|
|
+ <ARadio :value="1">{{ t('envMonitor.operationStatusDetermination') }}</ARadio>
|
|
|
+ </ARadioGroup>
|
|
|
</AFormItem>
|
|
|
- </div>
|
|
|
-
|
|
|
- <AFlex>
|
|
|
- <div class="spacing-right">
|
|
|
- <AFormItem
|
|
|
- :label="
|
|
|
- monitoringForm.tempHumidityControlMode === '1'
|
|
|
- ? $t('envMonitor.fanTemperatureSetting')
|
|
|
- : $t('envMonitor.indoorTemperatureConfiguration')
|
|
|
- "
|
|
|
- >
|
|
|
- <AFlex align="center">
|
|
|
+ <AFlex v-show="monitoringForm.runStatusFlag === 0">
|
|
|
+ <AFormItem name="supplyReturnTempDiff">
|
|
|
+ <AFlex align="center" class="spacing">
|
|
|
<AInputNumber
|
|
|
class="input-number-width"
|
|
|
- :placeholder="$t('common.pleaseEnter')"
|
|
|
- v-model:value="monitoringForm.tempUpper"
|
|
|
+ v-model:value="monitoringForm.supplyReturnTempDiff"
|
|
|
:min="0"
|
|
|
:max="999"
|
|
|
- />
|
|
|
- <div class="configure-text">{{ $t('envMonitor.upperLimitValue') }}</div>
|
|
|
- </AFlex>
|
|
|
- </AFormItem>
|
|
|
- <AFormItem>
|
|
|
- <AFlex align="center">
|
|
|
- <AInputNumber
|
|
|
- class="input-number-width"
|
|
|
:placeholder="$t('common.pleaseEnter')"
|
|
|
- v-model:value="monitoringForm.tempLower"
|
|
|
- :min="0"
|
|
|
- :max="999"
|
|
|
/>
|
|
|
- <div class="configure-text">{{ $t('envMonitor.lowerLimitValue') }}</div>
|
|
|
+ <div class="configure-text">{{ t('envMonitor.returnAirTemperatureDifference') }}</div>
|
|
|
</AFlex>
|
|
|
</AFormItem>
|
|
|
- <AFormItem>
|
|
|
+ <AFormItem name="supplyUpperTempDiff">
|
|
|
<AFlex align="center">
|
|
|
<AInputNumber
|
|
|
class="input-number-width"
|
|
|
- v-model:value="monitoringForm.tempPreset"
|
|
|
+ v-model:value="monitoringForm.supplyUpperTempDiff"
|
|
|
:min="0"
|
|
|
:max="999"
|
|
|
:placeholder="$t('common.pleaseEnter')"
|
|
|
/>
|
|
|
- <div class="configure-text">{{ $t('envMonitor.limitValue') }}</div>
|
|
|
+ <div class="configure-text">{{ t('envMonitor.upperLimitAirSupplyTemperatureDifference') }}</div>
|
|
|
</AFlex>
|
|
|
</AFormItem>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <AFormItem
|
|
|
- :label="
|
|
|
- monitoringForm.tempHumidityControlMode === '1'
|
|
|
- ? t('envMonitor.fanAirHumiditySetting')
|
|
|
- : $t('envMonitor.indoorHumiditySetting')
|
|
|
- "
|
|
|
- >
|
|
|
- <AFlex align="center">
|
|
|
- <AInputNumber
|
|
|
- class="input-number-width"
|
|
|
- v-model:value="monitoringForm.humidityUpper"
|
|
|
- :min="0"
|
|
|
- :max="999"
|
|
|
- :placeholder="$t('common.pleaseEnter')"
|
|
|
- />
|
|
|
- <div class="configure-text">{{ $t('envMonitor.upperLimitValue') }}</div>
|
|
|
- </AFlex>
|
|
|
+ </AFlex>
|
|
|
+ <AFlex justify="space-between" wrap="wrap" v-show="monitoringForm.runStatusFlag === 1">
|
|
|
+ <AFormItem name="runStatusDevGroupId">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.runStatusDevGroupId"
|
|
|
+ :options="twoDeviceGroup"
|
|
|
+ :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ @change="(value, option) => adddDeviceGroup(value, option, HumitureType.OperatingStatus)"
|
|
|
+ />
|
|
|
</AFormItem>
|
|
|
- <AFormItem>
|
|
|
- <AFlex align="center">
|
|
|
- <AInputNumber
|
|
|
- class="input-number-width"
|
|
|
- v-model:value="monitoringForm.humidityLower"
|
|
|
- :min="0"
|
|
|
- :max="999"
|
|
|
- :placeholder="$t('common.pleaseEnter')"
|
|
|
- />
|
|
|
- <div class="configure-text">{{ $t('envMonitor.lowerLimitValue') }}</div>
|
|
|
- </AFlex>
|
|
|
+ <AFormItem name="runStatusDevId">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.runStatusDevId"
|
|
|
+ :options="runDevicesList"
|
|
|
+ :field-names="{ label: 'deviceName', value: 'id' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ @change="(value, option) => adddRunStatusDevice(value, option)"
|
|
|
+ />
|
|
|
</AFormItem>
|
|
|
- <AFormItem>
|
|
|
- <AFlex align="center">
|
|
|
- <AInputNumber
|
|
|
- class="input-number-width"
|
|
|
- v-model:value="monitoringForm.humidityPreset"
|
|
|
- :min="0"
|
|
|
- :max="999"
|
|
|
- :placeholder="$t('common.pleaseEnter')"
|
|
|
- />
|
|
|
- <div class="configure-text">{{ $t('envMonitor.limitValue') }}</div>
|
|
|
- </AFlex>
|
|
|
+ <AFormItem name="runStatusParamCode">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.runStatusParamCode"
|
|
|
+ :options="runDeviceParamsList"
|
|
|
+ :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ @change="(value, option) => adddParametersDevice(value, option)"
|
|
|
+ />
|
|
|
</AFormItem>
|
|
|
- </div>
|
|
|
- </AFlex>
|
|
|
- <AFormItem :label="t('envMonitor.monitoringPointStatusConfiguration')" name="runStatusFlag">
|
|
|
- <ARadioGroup v-model:value="monitoringForm.runStatusFlag" class="radio-group">
|
|
|
- <ARadio :value="0">{{ t('envMonitor.temperatureDifferenceJudgment') }}</ARadio>
|
|
|
- <ARadio :value="1">{{ t('envMonitor.operationStatusDetermination') }}</ARadio>
|
|
|
- </ARadioGroup>
|
|
|
- </AFormItem>
|
|
|
- <AFlex v-show="monitoringForm.runStatusFlag === 0">
|
|
|
- <AFormItem name="supplyReturnTempDiff">
|
|
|
- <AFlex align="center" class="spacing">
|
|
|
- <AInputNumber
|
|
|
- class="input-number-width"
|
|
|
- v-model:value="monitoringForm.supplyReturnTempDiff"
|
|
|
- :min="0"
|
|
|
- :max="999"
|
|
|
- :placeholder="$t('common.pleaseEnter')"
|
|
|
+ <AFormItem name="runStatusConditionCode">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.runStatusConditionCode"
|
|
|
+ :options="inputType === 1 ? temperatureDifference : paramAlgOperator"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ :field-names="{ label: 'dictValue', value: 'dictValue' }"
|
|
|
/>
|
|
|
- <div class="configure-text">{{ t('envMonitor.returnAirTemperatureDifference') }}</div>
|
|
|
- </AFlex>
|
|
|
- </AFormItem>
|
|
|
- <AFormItem name="supplyUpperTempDiff">
|
|
|
- <AFlex align="center">
|
|
|
+ </AFormItem>
|
|
|
+ <AFormItem v-if="inputType === 1" name="runStatusConditionValue">
|
|
|
+ <ASelect
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.runStatusConditionValue"
|
|
|
+ :options="runStatusList"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ :field-names="{ label: 'name', value: 'name' }"
|
|
|
+ />
|
|
|
+ </AFormItem>
|
|
|
+
|
|
|
+ <AFormItem v-else name="runStatusConditionValue">
|
|
|
<AInputNumber
|
|
|
- class="input-number-width"
|
|
|
- v-model:value="monitoringForm.supplyUpperTempDiff"
|
|
|
+ class="input-wdith"
|
|
|
+ v-model:value="monitoringForm.runStatusConditionValue"
|
|
|
:min="0"
|
|
|
:max="999"
|
|
|
:placeholder="$t('common.pleaseEnter')"
|
|
|
/>
|
|
|
- <div class="configure-text">{{ t('envMonitor.upperLimitAirSupplyTemperatureDifference') }}</div>
|
|
|
- </AFlex>
|
|
|
- </AFormItem>
|
|
|
- </AFlex>
|
|
|
- <AFlex justify="space-between" wrap="wrap" v-show="monitoringForm.runStatusFlag === 1">
|
|
|
- <AFormItem name="runStatusDevGroupId">
|
|
|
+ </AFormItem>
|
|
|
+ </AFlex>
|
|
|
+ </AForm>
|
|
|
+ <template #footer>
|
|
|
+ <AFlex justify="flex-end" :gap="16">
|
|
|
+ <AButton class="default-button" @click="deleteMonitoringPoint">{{ $t('common.delete') }}</AButton>
|
|
|
+ <AButton type="primary" @click="saveMonitoringPoint">{{ $t('common.save') }}</AButton>
|
|
|
+ </AFlex>
|
|
|
+ </template>
|
|
|
+ </ADrawer>
|
|
|
+
|
|
|
+ <ADrawer
|
|
|
+ class="drawer-monitoring"
|
|
|
+ width="304"
|
|
|
+ :open="outdoorOpen"
|
|
|
+ :closable="false"
|
|
|
+ :header-style="headerStyle"
|
|
|
+ :footer-style="footerStyle"
|
|
|
+ >
|
|
|
+ <template #title>{{ $t('envMonitor.outdoorTemperatureAndHumidity') }}</template>
|
|
|
+ <template #extra>
|
|
|
+ <SvgIcon class="off-icon" @click="offOutdoorDrawer" name="close" />
|
|
|
+ </template>
|
|
|
+ <AForm ref="formOutdoorRef" :model="outdooForm" layout="vertical">
|
|
|
+ <AFormItem :label="$t('envMonitor.outdoorTemperatureAndHumidityMeter')" name="outsideDevGroupId">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.runStatusDevGroupId"
|
|
|
+ v-model:value="outdooForm.outsideDevGroupId"
|
|
|
:options="twoDeviceGroup"
|
|
|
:field-names="{ label: 'groupName', value: 'id' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddDeviceGroup(value, option, HumitureType.OperatingStatus)"
|
|
|
+ @change="(value, option) => adddDeviceGroup(value, option, HumitureType.Outdoor)"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
- <AFormItem name="runStatusDevId">
|
|
|
+ <AFormItem name="outsideDevId">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.runStatusDevId"
|
|
|
- :options="runDevicesList"
|
|
|
+ v-model:value="outdooForm.outsideDevId"
|
|
|
+ :options="outdoorDevicesList"
|
|
|
:field-names="{ label: 'deviceName', value: 'id' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddRunStatusDevice(value, option)"
|
|
|
+ @change="(value, option) => adddDevice(value, option, HumitureType.Outdoor)"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
- <AFormItem name="runStatusParamCode">
|
|
|
+ <AFormItem name="outsideTempParamCode">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.runStatusParamCode"
|
|
|
- :options="runDeviceParamsList"
|
|
|
+ v-model:value="outdooForm.outsideTempParamCode"
|
|
|
+ :options="outdoorDeviceParamsList"
|
|
|
:field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
- @change="(value, option) => adddParametersDevice(value, option)"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
- <AFormItem name="runStatusConditionCode">
|
|
|
+ <AFormItem name="outsideHumidityParamCode">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.runStatusConditionCode"
|
|
|
- :options="inputType === 1 ? temperatureDifference : paramAlgOperator"
|
|
|
+ v-model:value="outdooForm.outsideHumidityParamCode"
|
|
|
+ :options="outdoorDeviceParamsList"
|
|
|
+ :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
- :field-names="{ label: 'dictValue', value: 'dictValue' }"
|
|
|
/>
|
|
|
</AFormItem>
|
|
|
- <AFormItem v-if="inputType === 1" name="runStatusConditionValue">
|
|
|
+ <AFormItem name="outsideEnthalpyParamCode">
|
|
|
<ASelect
|
|
|
class="input-wdith"
|
|
|
- v-model:value="monitoringForm.runStatusConditionValue"
|
|
|
- :options="runStatusList"
|
|
|
+ v-model:value="outdooForm.outsideEnthalpyParamCode"
|
|
|
:placeholder="$t('common.plzSelect')"
|
|
|
- :field-names="{ label: 'name', value: 'name' }"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
-
|
|
|
- <AFormItem v-else name="runStatusConditionValue">
|
|
|
- <AInputNumber
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="monitoringForm.runStatusConditionValue"
|
|
|
- :min="0"
|
|
|
- :max="999"
|
|
|
- :placeholder="$t('common.pleaseEnter')"
|
|
|
- />
|
|
|
+ >
|
|
|
+ <ASelectOption value="温度">{{ t('envMonitor.temperature') }}</ASelectOption>
|
|
|
+ <ASelectOption value="湿度">{{ t('envMonitor.humidity') }}</ASelectOption>
|
|
|
+ </ASelect>
|
|
|
</AFormItem>
|
|
|
+ </AForm>
|
|
|
+ <template #footer>
|
|
|
+ <AFlex justify="flex-end" :gap="16">
|
|
|
+ <AButton type="primary" @click="saveOutdoo">{{ $t('common.save') }}</AButton>
|
|
|
+ </AFlex>
|
|
|
+ </template>
|
|
|
+ </ADrawer>
|
|
|
+
|
|
|
+ <ADrawer
|
|
|
+ width="612"
|
|
|
+ :open="monitoringDataOpen"
|
|
|
+ :closable="false"
|
|
|
+ class="drawer-monitoring"
|
|
|
+ :header-style="headerStyle"
|
|
|
+ :footer-style="footerStyle"
|
|
|
+ >
|
|
|
+ <template #title>{{ monitoringName }}</template>
|
|
|
+ <template #extra>
|
|
|
+ <SvgIcon class="off-icon" @click="offMonitoringDrawer" name="close" />
|
|
|
+ </template>
|
|
|
+ <HumitureCurve
|
|
|
+ :monitoring-id="monitoringId"
|
|
|
+ :monitoring-data="monitoringPointData"
|
|
|
+ :set-show="true"
|
|
|
+ :width="'580px'"
|
|
|
+ :height="'700px'"
|
|
|
+ />
|
|
|
+ </ADrawer>
|
|
|
+
|
|
|
+ <AModal
|
|
|
+ v-model:open="regionNameOpen"
|
|
|
+ :title="titleRegions ? $t('envMonitor.addArea') : $t('envMonitor.editArea')"
|
|
|
+ :footer="null"
|
|
|
+ width="460px"
|
|
|
+ :mask-closable="false"
|
|
|
+ :keyboard="false"
|
|
|
+ >
|
|
|
+ <div class="region-name">{{ $t('envMonitor.regionName') }}</div>
|
|
|
+ <AInput v-model:value="regionName" :placeholder="$t('common.pleaseEnter')" />
|
|
|
+
|
|
|
+ <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>
|
|
|
- </AForm>
|
|
|
- <template #footer>
|
|
|
- <AFlex justify="flex-end" :gap="16">
|
|
|
- <AButton class="default-button" @click="deleteMonitoringPoint">{{ $t('common.delete') }}</AButton>
|
|
|
- <AButton type="primary" @click="saveMonitoringPoint">{{ $t('common.save') }}</AButton>
|
|
|
- </AFlex>
|
|
|
- </template>
|
|
|
- </ADrawer>
|
|
|
-
|
|
|
- <ADrawer
|
|
|
- class="drawer-monitoring"
|
|
|
- width="304"
|
|
|
- :open="outdoorOpen"
|
|
|
- :closable="false"
|
|
|
- :header-style="headerStyle"
|
|
|
- :footer-style="footerStyle"
|
|
|
- >
|
|
|
- <template #title>{{ $t('envMonitor.outdoorTemperatureAndHumidity') }}</template>
|
|
|
- <template #extra>
|
|
|
- <SvgIcon class="off-icon" @click="offOutdoorDrawer" name="close" />
|
|
|
- </template>
|
|
|
- <AForm ref="formOutdoorRef" :model="outdooForm" layout="vertical">
|
|
|
- <AFormItem :label="$t('envMonitor.outdoorTemperatureAndHumidityMeter')" name="outsideDevGroupId">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="outdooForm.outsideDevGroupId"
|
|
|
- :options="twoDeviceGroup"
|
|
|
- :field-names="{ label: 'groupName', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- @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="$t('common.plzSelect')"
|
|
|
- @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="$t('common.plzSelect')"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
- <AFormItem name="outsideHumidityParamCode">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="outdooForm.outsideHumidityParamCode"
|
|
|
- :options="outdoorDeviceParamsList"
|
|
|
- :field-names="{ label: 'deviceParamName', value: 'deviceParamCode' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- />
|
|
|
- </AFormItem>
|
|
|
- <AFormItem name="outsideEnthalpyParamCode">
|
|
|
- <ASelect
|
|
|
- class="input-wdith"
|
|
|
- v-model:value="outdooForm.outsideEnthalpyParamCode"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
- >
|
|
|
- <ASelectOption value="温度">{{ t('envMonitor.temperature') }}</ASelectOption>
|
|
|
- <ASelectOption value="湿度">{{ t('envMonitor.humidity') }}</ASelectOption>
|
|
|
- </ASelect>
|
|
|
- </AFormItem>
|
|
|
- </AForm>
|
|
|
- <template #footer>
|
|
|
- <AFlex justify="flex-end" :gap="16">
|
|
|
- <AButton type="primary" @click="saveOutdoo">{{ $t('common.save') }}</AButton>
|
|
|
+ </AModal>
|
|
|
+
|
|
|
+ <AModal
|
|
|
+ v-model:open="regionCopyOpen"
|
|
|
+ :title="$t('envMonitor.copyPanel')"
|
|
|
+ :footer="null"
|
|
|
+ width="460px"
|
|
|
+ :mask-closable="false"
|
|
|
+ :keyboard="false"
|
|
|
+ >
|
|
|
+ <div class="region-name">{{ $t('envMonitor.selectCopyArea') }}</div>
|
|
|
+ <ASelect
|
|
|
+ v-model:value="copyToRegionId"
|
|
|
+ style="width: 100%"
|
|
|
+ :options="copyToRegionList"
|
|
|
+ :field-names="{ label: 'name', value: 'id' }"
|
|
|
+ :placeholder="$t('common.plzSelect')"
|
|
|
+ />
|
|
|
+ <AFlex justify="flex-end" class="region-name-top">
|
|
|
+ <AButton class="default-button cancel-button" @click="regionCopyOpen = false">{{
|
|
|
+ $t('common.cancel')
|
|
|
+ }}</AButton>
|
|
|
+ <AButton type="primary" @click="copyAreaCanvas">{{ $t('common.confirm') }}</AButton>
|
|
|
</AFlex>
|
|
|
- </template>
|
|
|
- </ADrawer>
|
|
|
-
|
|
|
- <ADrawer
|
|
|
- width="612"
|
|
|
- :open="monitoringDataOpen"
|
|
|
- :closable="false"
|
|
|
- class="drawer-monitoring"
|
|
|
- :header-style="headerStyle"
|
|
|
- :footer-style="footerStyle"
|
|
|
- >
|
|
|
- <template #title>{{ monitoringName }}</template>
|
|
|
- <template #extra>
|
|
|
- <SvgIcon class="off-icon" @click="offMonitoringDrawer" name="close" />
|
|
|
- </template>
|
|
|
- <HumitureCurve
|
|
|
- :monitoring-id="monitoringId"
|
|
|
- :monitoring-data="monitoringPointData"
|
|
|
- :set-show="true"
|
|
|
- :width="'580px'"
|
|
|
- :height="'700px'"
|
|
|
- />
|
|
|
- </ADrawer>
|
|
|
-
|
|
|
- <AModal
|
|
|
- v-model:open="regionNameOpen"
|
|
|
- :title="titleRegions ? $t('envMonitor.addArea') : $t('envMonitor.editArea')"
|
|
|
- :footer="null"
|
|
|
- width="460px"
|
|
|
- :mask-closable="false"
|
|
|
- :keyboard="false"
|
|
|
- >
|
|
|
- <div class="region-name">{{ $t('envMonitor.regionName') }}</div>
|
|
|
- <AInput v-model:value="regionName" :placeholder="$t('common.pleaseEnter')" />
|
|
|
-
|
|
|
- <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>
|
|
|
-
|
|
|
- <AModal
|
|
|
- v-model:open="regionCopyOpen"
|
|
|
- :title="$t('envMonitor.copyPanel')"
|
|
|
- :footer="null"
|
|
|
- width="460px"
|
|
|
- :mask-closable="false"
|
|
|
- :keyboard="false"
|
|
|
- >
|
|
|
- <div class="region-name">{{ $t('envMonitor.selectCopyArea') }}</div>
|
|
|
- <ASelect
|
|
|
- v-model:value="copyToRegionId"
|
|
|
- style="width: 100%"
|
|
|
- :options="copyToRegionList"
|
|
|
- :field-names="{ label: 'name', value: 'id' }"
|
|
|
- :placeholder="$t('common.plzSelect')"
|
|
|
+ </AModal>
|
|
|
+ <AreaEditor
|
|
|
+ ref="areaEditor"
|
|
|
+ :area-data="currentAreaData"
|
|
|
+ @open-outdoor-drawer="addOutdoorDrawer"
|
|
|
+ @save-area-canvas="saveAreaCanvas"
|
|
|
/>
|
|
|
- <AFlex justify="flex-end" class="region-name-top">
|
|
|
- <AButton class="default-button cancel-button" @click="regionCopyOpen = false">{{
|
|
|
- $t('common.cancel')
|
|
|
- }}</AButton>
|
|
|
- <AButton type="primary" @click="copyAreaCanvas">{{ $t('common.confirm') }}</AButton>
|
|
|
- </AFlex>
|
|
|
- </AModal>
|
|
|
- <AreaEditor
|
|
|
- ref="areaEditor"
|
|
|
- :area-data="currentAreaData"
|
|
|
- @open-outdoor-drawer="addOutdoorDrawer"
|
|
|
- @save-area-canvas="saveAreaCanvas"
|
|
|
- />
|
|
|
+ </ASpin>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
wangshun