add:新风系统

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/energyAlarm/editConfigureEnergyAlarm.vue

@@ -25,7 +25,6 @@
               label: 'orgName',
               value: 'orgId',
             }"
-            :disabled="true"
             tree-node-filter-prop="orgName" />
         </a-form-item>
         <a-form-item label="数据来源" name="dataSources">

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue

@@ -25,7 +25,6 @@
               value: 'orgId',
             }"
             :tree-data="siteDataTree"
-            :disabled="true"
             tree-node-filter-prop="orgName" />
         </a-form-item>
         <a-form-item label="设备类型" name="deviceType">

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue

@@ -345,4 +345,3 @@
     width: 23%;
   }
 </style>
-../../../../api/alarmManagement/alarmSettings/deviceAlarms

hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/conditioningModel.vue

@@ -0,0 +1,149 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div class="box-title title">
+      <span style="margin-left: 12px">空调相组</span>
+    </div>
+    <div class="box-bottom">
+      <template v-for="(item, index) in dataSource" :key="index">
+        <div class="box-bottom-item">
+          <div class="box-bottom-item-top">
+            <img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
+            <div class="box-bottom-item-top-title">
+              {{ item.title }}
+            </div>
+            <div
+              style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
+              <div class="box-bottom-item-line">
+                开关
+                <div class="box-bottom-item-line-value">
+                  <a-tag
+                    style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
+                    :style="{
+                      border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
+                      color: ['#39d7bb', '#f3614d', '#ffa403'][0],
+                    }"
+                    >开启</a-tag
+                  >
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                电机转速
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #f59a23">1210转/分钟</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                换热器热度
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">8℃</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                风量
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">12345m3/h</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                风速
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">22m/s</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                PM2.5
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">30</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                二氧化碳
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">123CO2e</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps({
+    dataSource: {
+      type: Object,
+      default: () => {
+        return { title: '' };
+      },
+    },
+  });
+</script>
+<style lang="less">
+  .title {
+    position: relative;
+    padding-left: 9px;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 40%;
+      transform: translateY(-50%);
+      height: 12px;
+      width: 3px;
+      border-radius: 1px;
+      background-color: #4388fb;
+    }
+  }
+  .box-title {
+    color: white;
+    padding: 0px 10px;
+    font-size: 14px;
+    width: 100%;
+    height: 30px;
+  }
+  .box-bottom {
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow-y: auto;
+    margin-top: 10px;
+    overflow-x: hidden;
+    .box-bottom-item {
+      width: 100%;
+      height: 478px;
+      background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
+      background-size: 100% 99%;
+      background-repeat: no-repeat;
+      color: white;
+      padding: 8px;
+      .box-bottom-item-top {
+        width: 100%;
+        font-size: 18px;
+        padding: 6px 12px;
+        position: relative;
+      }
+      .box-bottom-item-top-title {
+        display: flex;
+        position: absolute;
+        left: 62px;
+        top: 7px;
+      }
+      .box-bottom-item-line {
+        width: 100%;
+        flex: 1;
+        background-color: #0d1b32;
+        font-size: 14px;
+        padding: 6px 24px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .box-bottom-item-line-value {
+          display: flex;
+          position: absolute;
+          right: 24px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+</style>

hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/components/newTrendModel.vue

@@ -0,0 +1,149 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div class="box-title title">
+      <span style="margin-left: 12px">新风主机</span>
+    </div>
+    <div class="box-bottom">
+      <template v-for="(item, index) in dataSource" :key="index">
+        <div class="box-bottom-item">
+          <div class="box-bottom-item-top">
+            <img width="42" src="../../image/airConditioningSystem/newTrendModelIcon.png" />
+            <div class="box-bottom-item-top-title">
+              {{ item.title }}
+            </div>
+            <div
+              style="width: 100%; height: 400px; display: flex; gap: 12px; flex-direction: column">
+              <div class="box-bottom-item-line">
+                开关
+                <div class="box-bottom-item-line-value">
+                  <a-tag
+                    style="background-color: rgba(0, 0, 0, 0.5); width: 50px; text-align: center"
+                    :style="{
+                      border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][0],
+                      color: ['#39d7bb', '#f3614d', '#ffa403'][0],
+                    }"
+                    >开启</a-tag
+                  >
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                电机转速
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #f59a23">1210转/分钟</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                换热器热度
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">8℃</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                风量
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">12345m3/h</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                风速
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">22m/s</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                PM2.5
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">30</span>
+                </div>
+              </div>
+              <div class="box-bottom-item-line">
+                二氧化碳
+                <div class="box-bottom-item-line-value">
+                  <span style="color: #00ffd2">123CO2e</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  defineProps({
+    dataSource: {
+      type: Object,
+      default: () => {
+        return { title: '' };
+      },
+    },
+  });
+</script>
+<style lang="less">
+  .title {
+    position: relative;
+    padding-left: 9px;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 10px;
+      top: 40%;
+      transform: translateY(-50%);
+      height: 12px;
+      width: 3px;
+      border-radius: 1px;
+      background-color: #4388fb;
+    }
+  }
+  .box-title {
+    color: white;
+    padding: 0px 10px;
+    font-size: 14px;
+    width: 100%;
+    height: 30px;
+  }
+  .box-bottom {
+    width: 100%;
+    height: calc(100% - 40px);
+    overflow-y: auto;
+    margin-top: 10px;
+    overflow-x: hidden;
+    .box-bottom-item {
+      width: 100%;
+      height: 478px;
+      background-image: url(../../image/airConditioningSystem/newTrendModelBg.png);
+      background-size: 100% 99%;
+      background-repeat: no-repeat;
+      color: white;
+      padding: 8px;
+      .box-bottom-item-top {
+        width: 100%;
+        font-size: 18px;
+        padding: 6px 12px;
+        position: relative;
+      }
+      .box-bottom-item-top-title {
+        display: flex;
+        position: absolute;
+        left: 62px;
+        top: 7px;
+      }
+      .box-bottom-item-line {
+        width: 100%;
+        flex: 1;
+        background-color: #0d1b32;
+        font-size: 14px;
+        padding: 6px 24px;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .box-bottom-item-line-value {
+          display: flex;
+          position: absolute;
+          right: 24px;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+</style>

hx-ai-intelligent/src/view/equipmentControl/airConditioningSystem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; height: 100%; display: flex">
+  <div style="width: 100%; height: 100%; display: flex; overflow: hidden">
     <div class="legend-box">
       <template v-for="(item, index) in legend" :key="index">
         <div
@@ -41,17 +41,20 @@
       <!-- 新风主机 -->
       <div v-if="selectIndex === 2">
         <template v-for="(item, index) in newTrend" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left: 'calc(' + item.styleText.left + ' - 12.9%)',
+              bottom: 'calc(' + item.styleText.bottom + ' + 8%)',
+            }">
+            <doubleSingleModel :dataSource="item" />
+          </div>
           <img
-            style="
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
-              width: 50px;
-              height: 75px;
-              position: absolute;
-              transform: rotateY(180deg);
-              z-index: 1;
-            "
             :style="{
               left: 'calc(' + item.styleText.left + ' - 1.5%)',
               bottom: 'calc(' + item.styleText.bottom + ' + 4%)',
+              transform: 'rotateY(180deg)',
             }"
             src="../image/liftState/lift/line.png" />
           <img
@@ -60,6 +63,74 @@
             src="../image/airConditioningSystem/fan.png" />
         </template>
       </div>
+      <!-- 新风主机详情 -->
+      <a-drawer
+        :visible="selectIndex === 2"
+        :title="' '"
+        :mask="false"
+        class="newTrendModel"
+        placement="right"
+        headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
+        bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
+        @close="handleClose">
+        <newTrendModel :dataSource="newTrend" />
+      </a-drawer>
+      <!-- 空调箱 -->
+      <div v-if="selectIndex === 3">
+        <template v-for="(item, index) in conditioningData" :key="index">
+          <div
+            style="position: absolute"
+            :style="{
+              left:
+                'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 12.9%)' : ' - 13.3%)'),
+              bottom:
+                'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 8%)' : ' - 14%)'),
+            }">
+            <doubleSingleModel :dataSource="item" />
+          </div>
+          <img
+            style="width: 50px; height: 75px; position: absolute; z-index: 1"
+            :style="{
+              left: 'calc(' + item.styleText.left + (item.lineType === 1 ? ' - 1.5%)' : ' - 2%)'),
+              bottom: 'calc(' + item.styleText.bottom + (item.lineType === 1 ? ' + 4%)' : ' - 9%)'),
+              transform: item.lineType === 1 ? 'rotateY(180deg)' : 'rotate(180deg)',
+            }"
+            src="../image/liftState/lift/line.png" />
+          <img
+            style="width: 42px; height: 42px; position: absolute"
+            :style="{ left: item.styleText.left, bottom: item.styleText.bottom }"
+            src="../image/airConditioningSystem/conditioningIcon.png" />
+        </template>
+      </div>
+      <!-- 空调箱详情 -->
+      <a-drawer
+        :visible="selectIndex === 3"
+        :title="' '"
+        :mask="false"
+        class="newTrendModel"
+        placement="right"
+        headerStyle="background-color:rgba(33, 40, 54, 0.95); border-bottom: 2px solid #454545;"
+        bodyStyle="background-color: rgba(33, 40, 54, 0.95);"
+        @close="handleClose">
+        <conditioningModel :dataSource="newTrend" />
+      </a-drawer>
+      <!-- 空调箱 顶部详情 -->
+      <div
+        v-if="selectIndex === 3"
+        style="
+          width: 974px;
+          height: 146px;
+          background-color: #282d33;
+          display: flex;
+          position: absolute;
+          top: 20px;
+          right: 380px;
+          border-radius: 12px;
+          padding: 12px;
+          color: white;
+        ">
+        {{ selectConditioning.title }}
+      </div>
     </div>
   </div>
 </template>
@@ -72,9 +143,19 @@
   import airConditioner from '../image/airConditioningSystem/airConditioner.png';
   import floorHeating from '../image/airConditioningSystem/floorHeating.png';
   import selectImg from '../image/airConditioningSystem/selectImg.png';
-  import temperatureBox from '../image/airConditioningSystem/temperature-box.png';
+  // 温泉颜色
+  import sunRed from '../image/airConditioningSystem/sunRed.png';
+  import sunYellow from '../image/airConditioningSystem/sunYellow.png';
+  import sunBlue from '../image/airConditioningSystem/sunBlue.png';
 
   import singleModel from '../components/singleModel.vue';
+  import doubleSingleModel from '../components/doubleSingleModel.vue';
+  import newTrendModel from './components/newTrendModel.vue';
+  import conditioningModel from './components/conditioningModel.vue';
+  onMounted(() => {
+    selectConditioning.value = conditioningData.value[0];
+  });
+  onUnmounted(() => {});
   //图例
   const legend = ref([
     { url: temperature, name: '温度' },
@@ -83,6 +164,8 @@
     { url: airConditioner, name: '空调箱' },
     { url: floorHeating, name: '地暖' },
   ]);
+  const newTrendModels = ref(null);
+
   //温度传感器
   const sensor = ref([
     {
@@ -91,7 +174,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'G区多功能传感器',
@@ -99,7 +182,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunYellow,
     },
     {
       title: 'F区多功能传感器',
@@ -107,7 +190,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'E区多功能传感器',
@@ -115,7 +198,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunBlue,
     },
     {
       title: 'D区多功能传感器',
@@ -123,7 +206,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'C区多功能传感器',
@@ -131,7 +214,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'B区多功能传感器',
@@ -139,7 +222,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
     {
       title: 'A区多功能传感器',
@@ -147,7 +230,7 @@
       type: '温度',
       unit: '℃',
       number: 20,
-      url: temperatureBox,
+      url: sunRed,
     },
   ]);
   //人流
@@ -224,17 +307,18 @@
       styleText: { left: '43%', bottom: '44%' },
       type: '新风主机',
       unit: '℃',
-      number: 20,
+      number: 10,
       url: freshAir,
     },
     {
       title: 'C区新风主机',
       styleText: { left: '45%', bottom: '23%' },
       type: '新风主机',
+      number: 20,
       unit: '℃',
     },
     {
-      title: 'background-size区新风主机',
+      title: 'B区新风主机',
       styleText: { left: '61.5%', bottom: '54%' },
       type: '新风主机',
       unit: '℃',
@@ -245,22 +329,99 @@
       title: 'A区新风主机',
       styleText: { left: '63%', bottom: '36%' },
       type: '新风主机',
+      number: 30,
+      unit: '℃',
+    },
+  ]);
+  //空调箱
+  const conditioningData = ref([
+    {
+      title: '走廊区',
+      styleText: { left: '13%', bottom: '23%' },
+      type: '空调箱',
+      lineType: 1,
+      unit: '℃',
+      number: 20,
+      url: freshAir,
+    },
+    {
+      title: '西区',
+      styleText: { left: '28%', bottom: '30%' },
+      type: '空调箱',
+      lineType: 1,
+      unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '西北区',
+      styleText: { left: '38%', bottom: '45.5%' },
+      type: '空调箱',
+      lineType: 1,
+      unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '东北区',
+      styleText: { left: '57%', bottom: '53%' },
+      lineType: 1,
+      type: '空调箱',
       unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '东区',
+      styleText: { left: '73%', bottom: '53%' },
+      lineType: 1,
+      type: '空调箱',
+      unit: '℃',
+      number: 34,
+      url: freshAir,
+    },
+    {
+      title: '东南区',
+      styleText: { left: '68%', bottom: '38%' },
+      lineType: 2,
+      type: '空调箱',
+      unit: '℃',
+      number: 15,
+      url: freshAir,
+    },
+    {
+      title: '西南区',
+      styleText: { left: '43.5%', bottom: '22%' },
+      lineType: 2,
+      type: '空调箱',
+      unit: '℃',
+      number: 15,
+      url: freshAir,
     },
   ]);
+  //选择的空调箱
+  const selectConditioning = ref({});
   // 选择的图例
   const selectIndex = ref(0);
   const selectLegend = (item: any, index: any) => {
     if (selectIndex.value !== index) {
       selectIndex.value = index;
     }
+    if (selectIndex.value === 2) {
+      setTimeout(() => {
+        newTrendModels.value.toggle(newTrend);
+      }, 100);
+    }
+  };
+  const handleClose = () => {
+    selectIndex.value = 0;
   };
 </script>
-<style lang="less" scoped>
+<style lang="less">
   .legend-box {
     width: 5%;
     height: 100%;
-    background-color: rgba(40, 45, 51, 1);
+    background-color: rgba(33, 40, 54, 0.95);
     border-radius: 4px 0px 0px 4px;
     padding: 4px;
     .legend-box-item {
@@ -299,4 +460,11 @@
     overflow: hidden;
     border-radius: 0px 4px 4px 0px;
   }
+  .newTrendModel {
+    overflow-y: auto;
+    .anticon {
+      color: white !important;
+      margin-left: -10px;
+    }
+  }
 </style>

hx-ai-intelligent/src/view/equipmentControl/components/doubleSingleModel.vue

@@ -0,0 +1,116 @@
+<!-- 双图 -->
+<template>
+  <div class="box">
+    <div class="box-title title">
+      {{ dataSource.title }}
+    </div>
+    <div
+      style="
+        width: 100%;
+        height: 80px;
+        margin-top: 12px;
+        display: flex;
+        color: white;
+        font-size: 12px;
+      ">
+      <div
+        style="
+          width: 50%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        ">
+        <img style="width: 39px" src="../image/airConditioningSystem/electricFan.png" />
+        <div style="margin-top: 4px"> 风量 </div>
+        <div style="margin-top: -5px">
+          <span style="font-size: 18px; color: #0dffff; font-style: italic"> 18 </span>
+          <span style="font-size: 10px; margin-left: 5px">m3/h</span>
+        </div>
+      </div>
+      <div
+        style="
+          width: 50%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        ">
+        <img style="width: 39px" :src="getSunUrl()" />
+        <div style="margin-top: 4px"> 温度 </div>
+        <div style="margin-top: -5px">
+          <span :style="{ fontSize: '18px', color: getColor(), fontStyle: 'italic' }">
+            {{ dataSource.number }}
+          </span>
+          <span style="font-size: 10px; margin-left: 5px">℃</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import sunRed from '../image/airConditioningSystem/sunRed.png';
+  import sunYellow from '../image/airConditioningSystem/sunYellow.png';
+  import sunBlue from '../image/airConditioningSystem/sunBlue.png';
+  const props = defineProps({
+    dataSource: {
+      type: Object,
+      default: () => ({ title: '', number: 0 }), // 假设默认值还包括number属性
+    },
+  });
+  const getSunUrl = () => {
+    if (props.dataSource.number > 0 && props.dataSource.number < 20) {
+      return sunBlue;
+    } else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
+      return sunYellow;
+    } else {
+      return sunRed;
+    }
+  };
+  const getColor = () => {
+    if (props.dataSource.number > 0 && props.dataSource.number < 20) {
+      return '#0dffa4';
+    } else if (props.dataSource.number >= 20 && props.dataSource.number < 30) {
+      return '#f59a23';
+    } else {
+      return '#f36163';
+    }
+  };
+</script>
+<style lang="less" scoped>
+  .box {
+    width: 192px;
+    height: 125px;
+    background: inherit;
+    background-color: rgba(2, 29, 71, 0.9);
+    box-sizing: border-box;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgba(13, 255, 255, 1);
+    border-radius: 8px;
+    .title {
+      position: relative;
+      padding-left: 9px;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 10px;
+        top: 90%;
+        transform: translateY(-50%);
+        height: 10px;
+        width: 2.5px;
+        border-radius: 1px;
+        background-color: #0dffff;
+      }
+    }
+    .box-title {
+      width: 100%;
+      height: 20px;
+      font-size: 12px;
+      color: #0dffff;
+      padding: 12px 20px;
+    }
+  }
+</style>

hx-ai-intelligent/src/view/equipmentControl/components/singleModel.vue

@@ -20,7 +20,7 @@
     dataSource: {
       type: Object,
       default: () => {
-        return { name: '' };
+        return { title: '' };
       },
     },
   });