Просмотр исходного кода

1. 提交资源文件
2. 优化单道风窗模型电子屏监测字段显示

hongrunxia 2 месяцев назад
Родитель
Сommit
c03d59106f

+ 225 - 0
src/views/vent/gas/gasAssessment/components/gasControl.vue

@@ -0,0 +1,225 @@
+<template>
+  <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
+  <div class="monitor-container">
+    <transition enter-active-class="animate__animated  animate__fadeInLeft" leave-active-class="animate__animated  animate__fadeOutLeft">
+      <div class="lr left-box" v-if="loading">
+        <template v-for="unitIndex in unitNum" :key="unitIndex">
+          <ventBox1 v-if="unitIndex < 4" class="vent-margin-t-10">
+            <template #title>
+              <div>抽采单元{{ unitIndex }}</div>
+            </template>
+            <template #container>
+              <BarAndLine
+                xAxisPropType="time"
+                :dataSource="get(mockGasUnitData, 'history')"
+                height="205px"
+                :chartsColumns="gasUnitOption"
+                :option="echatsOption"
+              />
+            </template>
+          </ventBox1>
+        </template>
+      </div>
+    </transition>
+    <transition enter-active-class="animate__animated  animate__fadeInRight" leave-active-class="animate__animated  animate__fadeInRight">
+      <div class="lr right-box" v-if="loading">
+        <template v-for="unitIndex in unitNum" :key="unitIndex">
+          <ventBox1 v-if="unitIndex >= 4" class="vent-margin-t-10">
+            <template #title>
+              <div>抽采单元{{ unitIndex }}</div>
+            </template>
+            <template #container>
+              <BarAndLine
+                xAxisPropType="time"
+                :dataSource="get(mockGasUnitData, 'history')"
+                height="205px"
+                :chartsColumns="gasUnitOption"
+                :option="echatsOption"
+              />
+            </template>
+          </ventBox1>
+        </template>
+        <ventBox1 class="vent-margin-t-10">
+          <template #title>
+            <div>阀门调控</div>
+          </template>
+          <template #container>
+            <CustomChart :chart-config="gasUnitPieOption" :chart-data="mockPieData" height="200px" />
+          </template>
+        </ventBox1>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+  import CustomBadges from './customHeader.vue';
+  import { gasUnitOption, headerBadges, mockGasUnitData, gasUnitBarOption, mockData, gasUnitPieOption, mockPieData } from '../gasAssessment.data';
+  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+  import { get } from '@/utils/ventutil';
+  import CustomChart from '@/views/vent/home/configurable/components/detail/CustomChart.vue';
+  import BarAndLine from '/@/components/chart/BarAndLine.vue';
+  const echatsOption = {
+    grid: {
+      top: '70px',
+      left: '0px',
+      right: '30px',
+      bottom: '10px',
+      containLabel: true,
+    },
+    legend: {
+      top: '5',
+    },
+  };
+  const loading = ref(false);
+  const dataSource = ref({});
+  const unitNum = ref(5);
+  // // https获取监测数据
+  let timer: null | NodeJS.Timeout = null;
+  function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+      timer = setTimeout(
+        async () => {
+          if (timer) {
+            timer = null;
+          }
+          await getMonitor();
+          // loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    }
+  }
+
+  onMounted(async () => {
+    timer = null;
+    await getMonitor(true);
+    loading.value = true;
+  });
+</script>
+
+<style lang="less" scoped>
+  @ventSpace: zxm;
+  @import '/@/design/vent/modal.less';
+  @import '@/views/vent/monitorManager/comment/less/workFace.less';
+  .monitor-container {
+    height: 850px;
+    pointer-events: none;
+  }
+  .modal-monitor {
+    position: absolute;
+    z-index: -1;
+    flex-direction: row-reverse;
+    .main-container {
+      background-color: #00000078;
+    }
+    .monitor-item {
+      width: 180px;
+      display: flex;
+      flex-direction: row;
+      width: auto;
+      margin-bottom: 3px;
+      .monitor-title {
+        width: 120px;
+        color: #7af5ff;
+        font-weight: 400;
+        font-size: 13px;
+      }
+      .monitor-val {
+        color: #ffb700;
+        display: flex;
+        width: auto;
+
+        .val {
+          width: 60px;
+          font-size: 13px;
+          text-align: center;
+        }
+
+        .unit {
+          color: #ffffffbb;
+          font-size: 13px;
+        }
+      }
+    }
+    .title {
+      text-align: center;
+    }
+  }
+  .left-box,
+  .right-box {
+    width: 380px !important;
+  }
+  .gas-pump-item {
+    padding: 3px 0;
+  }
+
+  .param-set {
+    color: #45d3fd;
+    cursor: pointer;
+    &:hover {
+      color: #38a6c8;
+    }
+  }
+
+  .input-item {
+    margin: 3px 0 !important;
+    .value {
+      width: 80px;
+      text-align: center;
+    }
+  }
+  .data-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    .data-item {
+      width: calc(50% - 10px);
+      display: flex;
+      justify-content: space-between;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+    .value {
+      color: #00eefffe;
+    }
+    .data-item1 {
+      width: 100%;
+      line-height: 24px;
+      background-image: linear-gradient(to right, #39a3ff00, #39a3ff10, #39a3ff02);
+      margin: 4px 0;
+    }
+  }
+
+  .base-title {
+    line-height: 26px;
+    position: relative;
+    padding-left: 15px;
+    color: #9bf2ff;
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      width: 4px;
+      height: 12px;
+      top: 8px;
+      left: 5px;
+      background: #45d3fd;
+      border-radius: 4px;
+    }
+  }
+
+  .detail {
+    border: 1px solid #9bf2ff88;
+    padding: 0 5px;
+    background-color: #ffffff11;
+    margin-right: 4px;
+    &:hover {
+      background-color: #ffffff05;
+    }
+  }
+</style>

+ 1 - 1
src/views/vent/monitorManager/comment/components/LinkControlDesModal.vue

@@ -25,7 +25,7 @@
 
   const title = computed(() => props.modalTitle);
   const visible = computed(() => {
-    getLinkAlarmInfo({ id: props.deviceId + '' });
+    // getLinkAlarmInfo({ id: props.deviceId + '' });
     return props.modalIsShow;
   });
 

+ 3 - 1
src/views/vent/monitorManager/windowMonitor/dandaoFc.threejs.ts

@@ -78,7 +78,7 @@ class singleWindow {
         y: 90,
       },
       {
-        text: `${selectData.OpenDegree ? '开度值(%)' : selectData.forntArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
+        text: `${selectData.OpenDegree || selectData.OpenDegree1 ? '开度值(%)' : selectData.forntArea ? '过风面积(㎡)' : '过风面积(㎡)'}:`,
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
@@ -88,6 +88,8 @@ class singleWindow {
       {
         text: selectData.OpenDegree
           ? Number(`${selectData.OpenDegree}`).toFixed(2)
+          : selectData.OpenDegree1
+          ? Number(`${selectData.OpenDegree1}`).toFixed(2)
           : selectData.forntArea
           ? Number(`${selectData.forntArea}`).toFixed(2)
           : '-',

+ 1 - 1
src/views/vent/monitorManager/windowMonitor/index.vue

@@ -57,7 +57,7 @@
       <div class="top-right row">
         <div v-if="hasPermission('window:controlFull')" class="button-box" @click="setArea(5)">一键全开</div>
         <div v-if="hasPermission('window:controlFull')" class="button-box" @click="setArea(6)">一键全关</div>
-        <div class="button-box" @click="() => (linkAlarmShow = true)">预警指标</div>
+        <!-- <div class="button-box" @click="() => (linkAlarmShow = true)">预警指标</div> -->
         <!-- <div class="control-type row">
           <div class="control-title">控制模式:</div>
           <a-radio-group v-model:value="controlType">

+ 12 - 4
src/views/vent/monitorManager/windowMonitor/window.threejs.ts

@@ -99,10 +99,18 @@ export function computePlay(data, maxarea, isFirst = false) {
   if (windowType === 'doubleWindow' || windowType === 'singleWindow') {
     if (data.OpenDegree || data.OpenDegree1 || data.OpenDegree2) {
       maxarea = 90;
-      rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree1);
-      rotationParam.backDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree2);
-      rotationParam.frontDeg1 = (90 / maxarea) * Number(data.OpenDegree1) || 0;
-      rotationParam.backDeg1 = (90 / maxarea) * Number(data.OpenDegree2) || 0;
+      if (data.OpenDegree) {
+        rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree);
+        rotationParam.frontDeg1 = (90 / maxarea) * Number(data.OpenDegree) || 0;
+      }
+      if (data.OpenDegree1) {
+        rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree1);
+        rotationParam.frontDeg1 = (90 / maxarea) * Number(data.OpenDegree1) || 0;
+      }
+      if (data.OpenDegree2) {
+        rotationParam.backDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree2);
+        rotationParam.backDeg1 = (90 / maxarea) * Number(data.OpenDegree2) || 0;
+      }
     } else {
       if (!maxarea) maxarea = 90;
       rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.forntArea);