Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/home/clique/index.vue

@@ -104,7 +104,7 @@
   let orgcode = ref('');
 
   /** 数据是否使用实时数据，使用实时数据/报表数据对应某些数据的不同字段 */
-  const isDataRealTime = ref(true);
+  const isDataRealTime = ref(false);
 
   // https获取监测数据
   let timer: null | NodeJS.Timeout = null;

src/views/vent/monitorManager/fanLocalMonitor/components/dischargeGas.vue

@@ -21,8 +21,8 @@
           xAxisPropType="readTime"
           height="400px"
           :dataSource="echartsData"
-          :chartsColumns="chartsColumnList1"
-          :option="echatsOption"
+          :chartsColumns="chartsColumnListGas"
+          :option="echatsOption1"
         />
       </div>
     </div>
@@ -30,9 +30,9 @@
       <div class="right-inputs">
         <div class="vent-flex-row">
           <div class="input-title">出风口风量(m³/min)：</div>
-          <!-- <InputNumber class="input-box" size="large" v-model:value="ductOutletAirVolume_merge" /> -->
+          <span class="input-box" size="large">{{ data.ductOutletAirVolume_merge }}</span>
           <div class="input-title">局扇供风量(m³/min)：</div>
-          <!-- <InputNumber class="input-box" size="large" v-model:value="inletAirVolume_merge" /> -->
+          <span class="input-box" size="large">{{ data.inletAirVolume_merge }}</span>
         </div>
       </div>
     </div>
@@ -40,167 +40,195 @@
 </template>
 
 <script lang="ts" setup>
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { ref, nextTick, onMounted, watch } from 'vue';
-  import { chartsColumnList1, echatsOption } from '../fanLocal.data';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  const props = defineProps({
-    data: {
-      type: Object,
-      default: () => {},
-    },
-    gasMax: {
-      type: Number,
-    },
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { ref, nextTick, onMounted, watch } from 'vue';
+import { option, chartsColumnListGas, echatsOption1 } from '../fanLocal.data';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+  gasMax: {
+    type: Number,
+  },
+});
+const emit = defineEmits(['close', 'register', 'openModal']);
+// 注册 modal
+const [register, { closeModal }] = useModalInner((data) => {
+  nextTick(() => {
+    if (option['xAxis']) option['xAxis']['data'] = xData;
+    option['series'] = yDataList;
+    initEcharts();
   });
-  const emit = defineEmits(['close', 'register', 'openModal']);
-  // 注册 modal
-  const [register, { closeModal }] = useModalInner((data) => {
+});
+
+const ChartRef = ref();
+const myChart = ref();
+const refresh = ref(true);
+const xData: any[] = [];
+const yDataList: [] = [];
+const echartsData = ref<Record<string, any>[]>([]);
+const monitorData = ref<Record<string, any>>({});
+watch(
+  () => props.data,
+  (newVal) => {
+    // 创建新对象，合并 newVal 和 targetVolume
+    const combinedData = {
+      gasT1: newVal.gasT1,
+      gasT2: newVal.gasT2,
+      gasT3: newVal.gasT3,
+      gasT4: newVal.gasT4,
+      readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
+    };
+    monitorData.value = combinedData;
+    if (echartsData.value.length > 20) {
+      echartsData.value.shift();
+    }
+    echartsData.value = [...echartsData.value, combinedData];
+    console.log('echarts data:', echartsData.value);
+  }
+);
+function initEcharts() {
+  if (ChartRef.value) {
+    myChart.value = echarts.init(ChartRef.value);
+    option && myChart.value.setOption(option);
+    refresh.value = false;
     nextTick(() => {
-      // updateChart();
+      setTimeout(() => {
+        refresh.value = true;
+      }, 0);
     });
-  });
-  const echartsData = ref([]);
-  const monitorData = ref({});
-  watch(
-    () => props.data,
-    (newVal) => {
-      monitorData.value = newVal;
-      if (echartsData.value.length > 20) {
-        echartsData.value.shift();
-      }
-      echartsData.value = [...echartsData.value, newVal];
-      console.log(echartsData.value);
-    }
-  );
-  onMounted(() => {});
-  function onSubmit() {
-    emit('close');
-    closeModal();
   }
+}
+onMounted(() => {});
+function onSubmit() {
+  emit('close');
+  closeModal();
+}
 </script>
 
 <style scoped lang="less">
-  .modal-box {
-    display: flex;
-    flex-direction: row;
-    background-color: #ffffff05;
-    padding: 10px 8px 0 8px;
-    border: 1px solid #00d8ff22;
-    position: relative;
-    // min-height: 600px;
-    .left-box {
-      flex: 1; /* 占据 3/4 的空间 */
-      background-image: url(../../../../../assets/images/dischargeGas.svg);
-      background-repeat: no-repeat;
-      background-size: contain; /* 确保背景图片完整显示 */
-      background-position: center; /* 确保背景图片居中 */
-    }
-    .right-box {
-      flex: 1; /* 占据 3/4 的空间 */
-      height: 400px;
-      width: 100%;
-    }
+.modal-box {
+  display: flex;
+  flex-direction: row;
+  background-color: #ffffff05;
+  padding: 10px 8px 0 8px;
+  border: 1px solid #00d8ff22;
+  position: relative;
+  // min-height: 600px;
+  .left-box {
+    flex: 1; /* 占据 3/4 的空间 */
+    background-image: url(../../../../../assets/images/dischargeGas.svg);
+    background-repeat: no-repeat;
+    background-size: contain; /* 确保背景图片完整显示 */
+    background-position: center; /* 确保背景图片居中 */
   }
-  .setting-box {
-    width: 1570px;
-    height: 70px;
-    margin: 10px 0;
-    background-color: #ffffff05;
-    border: 1px solid #00d8ff22;
+  .right-box {
+    flex: 1; /* 占据 3/4 的空间 */
+    height: 400px;
+    width: 100%;
+  }
+}
+.setting-box {
+  width: 1570px;
+  height: 70px;
+  margin: 10px 0;
+  background-color: #ffffff05;
+  border: 1px solid #00d8ff22;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .right-inputs {
+    width: 100%;
     display: flex;
-    align-items: center;
+    height: 40px;
+    margin: 0 10px;
     justify-content: space-between;
+  }
+  .left-buttons {
+    display: flex;
+    height: 40px;
 
-    .right-inputs {
-      width: 100%;
-      display: flex;
-      height: 40px;
+    .btn {
       margin: 0 10px;
-      justify-content: space-between;
     }
-    .left-buttons {
-      display: flex;
-      height: 40px;
+  }
+  .border-clip {
+    width: 1px;
+    height: 25px;
+    border-right: 1px solid #8b8b8b77;
+  }
+  .input-title {
+    max-width: 150px;
+  }
+  .input-box {
+    width: 220px !important;
+    background: transparent !important;
+    border-color: #00d8ff44 !important;
+    margin-right: 20px;
+    color: #fff !important;
+  }
+  .btn {
+    padding: 8px 20px;
+    position: relative;
+    border-radius: 2px;
+    color: #fff;
+    width: fit-content;
+    cursor: pointer;
 
-      .btn {
-        margin: 0 10px;
-      }
-    }
-    .border-clip {
-      width: 1px;
-      height: 25px;
-      border-right: 1px solid #8b8b8b77;
-    }
-    .input-title {
-      max-width: 150px;
-    }
-    .input-box {
-      width: 220px !important;
-      background: transparent !important;
-      border-color: #00d8ff44 !important;
-      margin-right: 20px;
-      color: #fff !important;
-    }
-    .btn {
-      padding: 8px 20px;
-      position: relative;
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      top: 2px;
+      left: 2px;
       border-radius: 2px;
-      color: #fff;
-      width: fit-content;
-      cursor: pointer;
-
-      &::before {
-        position: absolute;
-        display: block;
-        content: '';
-        width: calc(100% - 4px);
-        height: calc(100% - 4px);
-        top: 2px;
-        left: 2px;
-        border-radius: 2px;
-        z-index: -1;
-      }
+      z-index: -1;
     }
+  }
 
-    .btn1 {
-      border: 1px solid #5cfaff;
+  .btn1 {
+    border: 1px solid #5cfaff;
 
-      &::before {
-        background-image: linear-gradient(#2effee92, #0cb1d592);
-      }
+    &::before {
+      background-image: linear-gradient(#2effee92, #0cb1d592);
+    }
 
-      &:hover {
-        border: 1px solid #5cfaffaa;
+    &:hover {
+      border: 1px solid #5cfaffaa;
 
-        &::before {
-          background-image: linear-gradient(#2effee72, #0cb1d572);
-        }
+      &::before {
+        background-image: linear-gradient(#2effee72, #0cb1d572);
       }
     }
   }
+}
 
-  @keyframes open {
-    0% {
-      height: 0px;
-    }
-    100% {
-      height: fit-content;
-    }
+@keyframes open {
+  0% {
+    height: 0px;
   }
-
-  @keyframes close {
-    0% {
-      height: fit-content;
-    }
-    100% {
-      height: 0px;
-    }
+  100% {
+    height: fit-content;
   }
-  :deep(.zxm-divider-inner-text) {
-    color: #cacaca88 !important;
+}
+
+@keyframes close {
+  0% {
+    height: fit-content;
   }
-  :deep(.zxm-form-item) {
-    margin-bottom: 10px;
+  100% {
+    height: 0px;
   }
+}
+:deep(.zxm-divider-inner-text) {
+  color: #cacaca88 !important;
+}
+:deep(.zxm-form-item) {
+  margin-bottom: 10px;
+}
 </style>

src/views/vent/monitorManager/fanLocalMonitor/components/supplyAir.vue

@@ -17,11 +17,11 @@
       <div class="right-box">
         <BarAndLine
           class="echarts-line"
-          xAxisPropType="time"
+          xAxisPropType="readTime"
           height="400px"
           :dataSource="echartsData"
           :chartsColumns="chartsColumnList1"
-          :option="echatsOption"
+          :option="echatsOption1"
         />
       </div>
     </div>
@@ -29,9 +29,9 @@
       <div class="right-inputs">
         <div class="vent-flex-row">
           <div class="input-title">出风口风量(m³/min)：</div>
-          <InputNumber class="input-box" size="large" v-model:value="dataSource['ductOutletAirVolume_merge']" />
+          <span class="input-box" size="large">{{ data.ductOutletAirVolume_merge }}</span>
           <div class="input-title">局扇供风量(m³/min)：</div>
-          <InputNumber class="input-box" size="large" v-model:value="dataSource['inletAirVolume_merge']" />
+          <span class="input-box" size="large">{{ data.inletAirVolume_merge }}</span>
         </div>
       </div>
     </div>
@@ -39,193 +39,201 @@
 </template>
 
 <script lang="ts" setup>
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { ref, onMounted, nextTick, watch } from 'vue';
-  import echarts from '/@/utils/lib/echarts';
-  import { option, chartsColumnList1, echatsOption } from '../fanLocal.data';
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import dayjs from 'dayjs';
-  const emit = defineEmits(['close', 'register', 'openModal']);
-  const props = defineProps({
-    data: {
-      type: Object,
-      default: () => {},
-    },
-    targetVolume: {
-      type: Number,
-    },
-  });
-  // 注册 modal
-  const [register, { closeModal }] = useModalInner((data) => {
-    nextTick(() => {
-      if (option['xAxis']) option['xAxis']['data'] = xData;
-      option['series'] = yDataList;
-      initEcharts();
-    });
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { ref, onMounted, nextTick, watch } from 'vue';
+import echarts from '/@/utils/lib/echarts';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import { option, chartsColumnList1, echatsOption1 } from '../fanLocal.data';
+
+const emit = defineEmits(['close', 'register', 'openModal']);
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+  targetVolume: {
+    type: Number,
+  },
+});
+// 注册 modal
+const [register, { closeModal }] = useModalInner((data) => {
+  nextTick(() => {
+    if (option['xAxis']) option['xAxis']['data'] = xData;
+    option['series'] = yDataList;
+    initEcharts();
   });
-  const ChartRef = ref();
-  const myChart = ref();
-  const refresh = ref(true);
-  const xData: any[] = [];
-  const yDataList: [] = [];
-  const echartsData = ref([]);
-  const monitorData = ref({});
-  watch(
-    () => props.data,
-    (newVal) => {
-      monitorData.value = newVal;
-      if (echartsData.value.length > 20) {
-        echartsData.value.shift();
-      }
-      echartsData.value = [...echartsData.value, newVal];
-      console.log(echartsData.value);
+});
+const ChartRef = ref();
+const myChart = ref();
+const refresh = ref(true);
+const xData: any[] = [];
+const yDataList: [] = [];
+// const echartsData = ref([]);
+// const monitorData = ref({});
+const echartsData = ref<Record<string, any>[]>([]);
+const monitorData = ref<Record<string, any>>({});
+watch(
+  () => props.data,
+  (newVal) => {
+    // 创建新对象，合并 newVal 和 targetVolume
+    const combinedData = {
+      inletAirVolume_merge: newVal.inletAirVolume_merge,
+      targetVolume: props.targetVolume, // 添加目标风量
+      readTime: newVal.readTime || new Date().toISOString(), // 确保有时间字段
+    };
+    monitorData.value = combinedData;
+    if (echartsData.value.length > 20) {
+      echartsData.value.shift();
     }
-  );
-  function onSubmit() {
-    emit('close');
-    closeModal();
-  }
-  function onCancel() {
-    //
+    echartsData.value = [...echartsData.value, combinedData];
+    console.log('echarts data:', echartsData.value);
   }
-  function initEcharts() {
-    if (ChartRef.value) {
-      myChart.value = echarts.init(ChartRef.value);
-      option && myChart.value.setOption(option);
-      refresh.value = false;
-      nextTick(() => {
-        setTimeout(() => {
-          refresh.value = true;
-        }, 0);
-      });
-    }
+);
+function onSubmit() {
+  emit('close');
+  closeModal();
+}
+function onCancel() {
+  //
+}
+function initEcharts() {
+  if (ChartRef.value) {
+    myChart.value = echarts.init(ChartRef.value);
+    option && myChart.value.setOption(option);
+    refresh.value = false;
+    nextTick(() => {
+      setTimeout(() => {
+        refresh.value = true;
+      }, 0);
+    });
   }
-  onMounted(() => {
-    // initEcharts();
-  });
+}
+onMounted(() => {
+  // initEcharts();
+});
 </script>
 
 <style scoped lang="less">
-  .modal-box {
-    display: flex;
-    flex-direction: row;
-    background-color: #ffffff05;
-    padding: 10px 8px 0 8px;
-    border: 1px solid #00d8ff22;
-    position: relative;
-    // min-height: 600px;
-    .left-box {
-      flex: 1; /* 占据 3/4 的空间 */
-      background-image: url(../../../../../assets/images/supplyAir.svg);
-      background-repeat: no-repeat;
-      background-size: contain; /* 确保背景图片完整显示 */
-      background-position: center; /* 确保背景图片居中 */
-    }
-    .right-box {
-      flex: 1; /* 占据 3/4 的空间 */
-      height: 400px;
-      width: 100%;
-    }
+.modal-box {
+  display: flex;
+  flex-direction: row;
+  background-color: #ffffff05;
+  padding: 10px 8px 0 8px;
+  border: 1px solid #00d8ff22;
+  position: relative;
+  // min-height: 600px;
+  .left-box {
+    flex: 1; /* 占据 3/4 的空间 */
+    background-image: url(../../../../../assets/images/supplyAir.svg);
+    background-repeat: no-repeat;
+    background-size: contain; /* 确保背景图片完整显示 */
+    background-position: center; /* 确保背景图片居中 */
   }
-  .setting-box {
-    width: 1570px;
-    height: 70px;
-    margin: 10px 0;
-    background-color: #ffffff05;
-    border: 1px solid #00d8ff22;
+  .right-box {
+    flex: 1; /* 占据 3/4 的空间 */
+    height: 400px;
+    width: 100%;
+  }
+}
+.setting-box {
+  width: 1570px;
+  height: 70px;
+  margin: 10px 0;
+  background-color: #ffffff05;
+  border: 1px solid #00d8ff22;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .right-inputs {
+    width: 100%;
     display: flex;
-    align-items: center;
+    height: 40px;
+    margin: 0 10px;
     justify-content: space-between;
+  }
+  .left-buttons {
+    display: flex;
+    height: 40px;
 
-    .right-inputs {
-      width: 100%;
-      display: flex;
-      height: 40px;
+    .btn {
       margin: 0 10px;
-      justify-content: space-between;
     }
-    .left-buttons {
-      display: flex;
-      height: 40px;
+  }
+  .border-clip {
+    width: 1px;
+    height: 25px;
+    border-right: 1px solid #8b8b8b77;
+  }
+  .input-title {
+    max-width: 150px;
+  }
+  .input-box {
+    width: 220px !important;
+    background: transparent !important;
+    border-color: #00d8ff44 !important;
+    margin-right: 20px;
+    color: #fff !important;
+  }
+  .btn {
+    padding: 8px 20px;
+    position: relative;
+    border-radius: 2px;
+    color: #fff;
+    width: fit-content;
+    cursor: pointer;
 
-      .btn {
-        margin: 0 10px;
-      }
-    }
-    .border-clip {
-      width: 1px;
-      height: 25px;
-      border-right: 1px solid #8b8b8b77;
-    }
-    .input-title {
-      max-width: 150px;
-    }
-    .input-box {
-      width: 220px !important;
-      background: transparent !important;
-      border-color: #00d8ff44 !important;
-      margin-right: 20px;
-      color: #fff !important;
-    }
-    .btn {
-      padding: 8px 20px;
-      position: relative;
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: calc(100% - 4px);
+      height: calc(100% - 4px);
+      top: 2px;
+      left: 2px;
       border-radius: 2px;
-      color: #fff;
-      width: fit-content;
-      cursor: pointer;
-
-      &::before {
-        position: absolute;
-        display: block;
-        content: '';
-        width: calc(100% - 4px);
-        height: calc(100% - 4px);
-        top: 2px;
-        left: 2px;
-        border-radius: 2px;
-        z-index: -1;
-      }
+      z-index: -1;
     }
+  }
 
-    .btn1 {
-      border: 1px solid #5cfaff;
+  .btn1 {
+    border: 1px solid #5cfaff;
 
-      &::before {
-        background-image: linear-gradient(#2effee92, #0cb1d592);
-      }
+    &::before {
+      background-image: linear-gradient(#2effee92, #0cb1d592);
+    }
 
-      &:hover {
-        border: 1px solid #5cfaffaa;
+    &:hover {
+      border: 1px solid #5cfaffaa;
 
-        &::before {
-          background-image: linear-gradient(#2effee72, #0cb1d572);
-        }
+      &::before {
+        background-image: linear-gradient(#2effee72, #0cb1d572);
       }
     }
   }
+}
 
-  @keyframes open {
-    0% {
-      height: 0px;
-    }
-    100% {
-      height: fit-content;
-    }
+@keyframes open {
+  0% {
+    height: 0px;
   }
-
-  @keyframes close {
-    0% {
-      height: fit-content;
-    }
-    100% {
-      height: 0px;
-    }
+  100% {
+    height: fit-content;
   }
-  :deep(.zxm-divider-inner-text) {
-    color: #cacaca88 !important;
+}
+
+@keyframes close {
+  0% {
+    height: fit-content;
   }
-  :deep(.zxm-form-item) {
-    margin-bottom: 10px;
+  100% {
+    height: 0px;
   }
+}
+:deep(.zxm-divider-inner-text) {
+  color: #cacaca88 !important;
+}
+:deep(.zxm-form-item) {
+  margin-bottom: 10px;
+}
 </style>

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.data.ts

@@ -3625,6 +3625,38 @@ export const echatsOption = {
     },
   },
 };
+export const echatsOption1 = {
+  legend: {
+    top: 10,
+  },
+  grid: {
+    top: '18%',
+    left: '30',
+    right: '35',
+    bottom: '10%',
+    containLabel: true,
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {
+        show: false,
+      },
+    },
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      margin: 10,
+      color: '#f1f1f199',
+    },
+    name: '',
+  },
+  yAxis: {
+    axisLabel: {
+      color: '#0071A5',
+    },
+  },
+};
 export const chartsColumnList = [
   {
     legend: '瓦斯浓度',
@@ -3674,7 +3706,7 @@ export const chartsColumnList1 = [
     color: '#00FFA8',
     sort: 1,
     xRotate: 0,
-    dataIndex: 'm3',
+    dataIndex: 'targetVolume',
   },
   {
     legend: '供风量',
@@ -3682,11 +3714,61 @@ export const chartsColumnList1 = [
     ymax: 1100,
     yname: 'm³/min',
     linetype: 'line',
-    yaxispos: 'right',
+    yaxispos: 'left',
     color: '#FDB146',
-    sort: 2,
+    sort: 1,
     xRotate: 0,
-    dataIndex: 'm3',
+    dataIndex: 'inletAirVolume_merge',
+  },
+];
+export const chartsColumnListGas = [
+  {
+    legend: 'T1',
+    seriesName: '(%)',
+    ymax: 1,
+    yname: '%',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#00FFA8',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'gasT1',
+  },
+  {
+    legend: 'T2',
+    seriesName: '(%)',
+    ymax: 1,
+    yname: '%',
+    linetype: 'line',
+    color: '#FDB146',
+    yaxispos: 'left',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'gasT2',
+  },
+  {
+    legend: 'T3',
+    seriesName: '(%)',
+    ymax: 1,
+    yname: '%',
+    linetype: 'line',
+    color: '#DA3914',
+    yaxispos: 'left',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'gasT3',
+  },
+  {
+    legend: 'T4',
+    seriesName: '(%)',
+    ymax: 1,
+    yname: '%',
+    linetype: 'line',
+    color: '#03C2EC',
+    yaxispos: 'left',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'gasT4',
   },
 ];
 export const initData = () => {