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

.env.development

@@ -29,6 +29,7 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

src/components/chart/BarAndLine.vue

@@ -116,7 +116,6 @@
       initChartsOption();
 
       function initCharts(isRefresh = false) {
-        debugger;
         if (props.dataSource.length < 1) return;
         //轴数据
         let isFresh = false;

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

@@ -3,41 +3,36 @@
     @register="register"
     title="智能排放瓦斯"
     :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }"
-    width="1200px"
+    width="1600px"
+    style="height: 60%"
     v-bind="$attrs"
     @ok="onSubmit"
-    :closeFunc="onCancel"
     :canFullscreen="false"
     :destroyOnClose="true"
     :footer="null"
     :maskClosable="false"
   >
     <div class="modal-box">
-      <div class="left-box" style="width: 550px; height: 300px"> </div>
+      <div class="left-box" style="width: 900px; height: 400px"> </div>
       <div class="right-box">
-        <!-- <div class="box-title">曲线方程</div> -->
-        <dv-decoration7 style="height: 20px">
-          <div class="box-title">风量数据</div>
-        </dv-decoration7>
-        <div class="info-lines">
-          <div class="right-box-inputs">
-            <div class="input-title" style="margin-top: 20px; line-height: 40px">出风口风量(m³/min)： <span></span></div>
-            <div class="input-title" style="margin-top: 20px; line-height: 40px">局扇供风量(m³/min)： <span></span></div>
-          </div>
-        </div>
+        <!-- <div ref="ChartRef" class="line-chart" style="height: 400px; width: 100%"></div> -->
+        <BarAndLine
+          class="echarts-line"
+          xAxisPropType="readTime"
+          height="400px"
+          :dataSource="echartsData"
+          :chartsColumns="chartsColumnList1"
+          :option="echatsOption"
+        />
       </div>
-      <div class="tip-box"> </div>
-    </div>
-    <div class="chart-box">
-      <BarAndLine class="echarts-line" xAxisPropType="time" height="400px" />
     </div>
     <div class="setting-box">
       <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="uQ1" />
+          <!-- <InputNumber class="input-box" size="large" v-model:value="ductOutletAirVolume_merge" /> -->
           <div class="input-title">局扇供风量(m³/min)：</div>
-          <InputNumber class="input-box" size="large" v-model:value="uH" />
+          <!-- <InputNumber class="input-box" size="large" v-model:value="inletAirVolume_merge" /> -->
         </div>
       </div>
     </div>
@@ -45,874 +40,167 @@
 </template>
 
 <script lang="ts" setup>
-//ts语法
-import { ref, onMounted, reactive, nextTick, computed } from 'vue';
-import echarts from '/@/utils/lib/echarts';
-import { option, initData, fanInfoData, chartsColumnList, echatsOption } from '../fanLocal.data';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import { useForm } from '/@/components/Form/index';
-import { Input, InputNumber } from 'ant-design-vue';
-import { Decoration7 as DvDecoration7 } from '@kjgl77/datav-vue3';
-import { message } from 'ant-design-vue';
-import { formatNum } from '/@/utils/ventutil';
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
-import { cloneDeep } from 'lodash-es';
-import dayjs from 'dayjs';
-import { SendOutlined } from '@ant-design/icons-vue';
-
-const emit = defineEmits(['close', 'register', 'openModal']);
-const props = defineProps({
-  dataSource: {
-    type: Array,
-    default: () => [],
-  },
-  frequency: {
-    type: Number,
-    default: 30,
-  },
-  m3: {
-    type: Number,
-    default: 670.8,
-  },
-  // gasWarningMax: { type: Number, default: 0.5 },
-  // gasWarningVal: { type: Number, default: 0.6 },
-  // windQuantity: { type: Number, default: 635.84 },
-});
-type AssistanceItemType = {
-  angle: number;
-  Hz: number;
-  a: number;
-  b: number;
-  c: number;
-  min: number;
-  max: number;
-};
-
-// 注册 modal
-const [register, { closeModal }] = useModalInner((data) => {
-  nextTick(() => {
-    computeAssistance();
-    if (option['xAxis']) option['xAxis']['data'] = xData;
-    option['series'] = yDataList;
-    if (JSON.stringify(data) !== '{}') {
-      uQ1.value = Number(data['m3']);
-      uHz.value = Math.ceil(data['frequency']);
-      gasWarningVal.value = data['gasWarningVal'];
-      isComputeGas.value = true;
-      nextTick(() => {
-        computeUH(data['frequency'], data['m3']);
-        initEcharts();
-        setTimeout(() => {
-          // 根据频率计算uH
-          makeLine();
-        }, 2000);
-      });
-    } else {
-      initEcharts();
-      isComputeGas.value = false;
-    }
+  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,
+    },
   });
-});
-const loadding = ref<boolean>(false);
-const formShow = ref(false);
-const formType = ref('');
-const ChartRef = ref();
-const myChart = ref();
-const refresh = ref(true);
-const xDataMax = 1000;
-let xDataMin = 0;
-const xData: any[] = [];
-const yDataList: [] = [];
-let lineNum = 0;
-const lineEquation = ref<string[]>([]);
-const assistanceData = ref([]);
-const monitorData = ref([]);
-const gasWarningVal = ref(0);
-const gasWarningMax = ref(0.5);
-const isComputeGas = ref(false);
-const isStartCompute = ref(0);
-const uHz = ref(0);
-const uQ1 = ref(0);
-const uQ = computed(() => {
-  if (uQ1.value) {
-    if (gasWarningVal.value) {
-      return ((uQ1.value * gasWarningVal.value) / gasWarningMax.value) * 1.08;
-    }
-    return uQ1.value;
-  } else {
-    return 0;
-  }
-});
-const uH = ref<number | undefined>(undefined); //  - 1000
-const isHaCross = ref(true);
-const resultObj = ref<{ x: number; y: number; Hz: number } | null>(null);
-
-const [registerForm, {}] = useForm({
-  labelWidth: 120,
-  actionColOptions: {
-    span: 24,
-  },
-  compact: true,
-  showSubmitButton: true,
-  submitButtonOptions: {
-    text: '提交',
-    preIcon: '',
-  },
-  showResetButton: true,
-  resetButtonOptions: {
-    text: '关闭',
-    preIcon: '',
-  },
-  resetFunc: async () => {
-    formShow.value = false;
-  },
-});
-
-function computeAssistance() {
-  assistanceData.value = initData();
-  lineNum = 0;
-  const assistanceDataList = [];
-  const lineEquationList: string[] = [];
-  for (const key in assistanceData.value) {
-    const item = assistanceData.value[key];
-    assistanceDataList.push(item);
-    lineEquationList.push(
-      `H${parseInt(item['Hz'])} = ${item['a']}Q² ${Number(item['b']) > 0 ? '+' : '-'} ${Math.abs(Number(item['b'])).toFixed(4)}Q ${
-        Number(item['c']) > 0 ? '+' : '-'
-      } ${Math.abs(Number(item['c'])).toFixed(4)}`
-    );
-  }
-  lineEquation.value = lineEquationList;
-  lineNum = assistanceDataList.length;
-  xDataMin =
-    Math.min.apply(
-      Math,
-      assistanceDataList.map((item) => {
-        return item.min;
-      })
-    ) - 100;
-  // const xDataMax = Math.max.apply(Math, assistanceDataList.map(item => { return item.max }))
-  fanInfoData.flfw = `${xDataMin}~${xDataMax}`;
-  const computeItem = (item: AssistanceItemType) => {
-    const min = item.min;
-    const max = item.max;
-    const HList: number[] = [];
-    for (let i = xDataMin; i <= xDataMax; i++) {
-      if (i < min) {
-        HList.push(null);
-      } else if (i > max) {
-        HList.push(null);
-      } else {
-        HList.push(item.a * i * i + item.b * i + item.c);
+  const emit = defineEmits(['close', 'register', 'openModal']);
+  // 注册 modal
+  const [register, { closeModal }] = useModalInner((data) => {
+    nextTick(() => {
+      // updateChart();
+    });
+  });
+  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);
     }
-    return HList;
-  };
-
-  for (const key in assistanceData.value) {
-    const element: AssistanceItemType = assistanceData.value[key];
-    const yData: number[] = computeItem(element);
-    const series = {
-      type: 'line',
-      name: `${element['Hz']}Hz`,
-      smooth: true,
-      showSymbol: false,
-      symbol: 'none',
-      emphasis: {
-        focus: 'series',
-      },
-      itemStyle: { normal: { label: { show: true } } },
-      lineStyle: {
-        width: 1,
-        color: '#ffffff88',
-      },
-      zlevel: 0,
-      z: 1,
-      endLabel: {
-        show: true,
-        formatter: '{a}',
-        distance: 0,
-        color: '#39E9FE99',
-        backgroundColor: 'transparent',
-        padding: [3, 3, 2, 3],
-      },
-      data: yData,
-    };
-
-    yDataList.push(series);
-  }
-
-  for (let i = xDataMin; i <= xDataMax; i++) {
-    xData.push(i);
+  );
+  onMounted(() => {});
+  function onSubmit() {
+    emit('close');
+    closeModal();
   }
-}
+</script>
 
-function computeUH(Hz: number, uQ: number) {
-  debugger;
-  const equation = assistanceData.value.find((item) => {
-    return Math.ceil(Hz) == item['Hz'];
-  });
-  if (equation) {
-    const uHMax = Math.round((equation['a'] * equation['min'] * equation['min'] + equation['b'] * equation['min'] + equation['c']) * 100) / 100;
-    const uHMin = Math.round((equation['a'] * equation['max'] * equation['max'] + equation['b'] * equation['max'] + equation['c']) * 100) / 100;
-    const uH1 = Math.round((equation['a'] * uQ * uQ + equation['b'] * uQ + equation['c']) * 100) / 100;
-    if (uH1 >= uHMin && uH1 <= uHMax) {
-      uH.value = uH1;
-      isHaCross.value = true;
-    } else {
-      isHaCross.value = false;
-    }
-  }
-}
+<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%;
+    }
+  }
+  .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;
 
-function computeRLine() {
-  console.log('计算后的风量为------------>', uQ.value);
-  if (uH.value && uQ.value) {
-    const R = uH.value / Number(uQ.value) / Number(uQ.value);
-    const yAxis: number[] = [];
-    for (let i = 0; i < xData.length; i++) {
-      const x = xData[i];
-      const y = R * x * x;
-      if (x == uQ.value) {
-        uH.value = y;
-      }
-      yAxis.push(y);
+    .right-inputs {
+      width: 100%;
+      display: flex;
+      height: 40px;
+      margin: 0 10px;
+      justify-content: space-between;
     }
-    const series = {
-      name: 'R',
-      type: 'line',
-      smooth: true,
-      showSymbol: false,
-      zlevel: 0,
-      emphasis: {
-        focus: 'series',
-      },
-      itemStyle: { normal: { label: { show: true } } },
-      lineStyle: {
-        width: 2,
-        color: '#D0A343',
-      },
-      endLabel: {
-        show: true,
-        formatter: '{a}',
-        distance: 0,
-        color: '#D0A343',
-      },
-      data: yAxis,
-    };
-    yDataList[lineNum] = series;
-  }
-}
+    .left-buttons {
+      display: flex;
+      height: 40px;
 
-function reSetLine() {
-  let minIndex = -1;
-  for (let i = 0; i < yDataList.length; i++) {
-    if (i !== lineNum && i != lineNum + 1) {
-      if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['color'] = '#ffffff88';
-      if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['width'] = 1;
-      if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['color']) {
-        yDataList[i]['endLabel']['color'] = '#39E9FE99';
+      .btn {
+        margin: 0 10px;
       }
-      if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['backgroundColor']) yDataList[i]['endLabel']['backgroundColor'] = 'transparent';
-      if (yDataList[i]['z']) yDataList[i]['z'] = 1;
     }
-
-    if (resultObj.value && `${resultObj.value.Hz}Hz` == yDataList[i]['name']) {
-      minIndex = i;
+    .border-clip {
+      width: 1px;
+      height: 25px;
+      border-right: 1px solid #8b8b8b77;
     }
-  }
-  if (minIndex != -1) {
-    yDataList[minIndex]['lineStyle']['color'] = '#9A60B4';
-    yDataList[minIndex]['lineStyle']['width'] = 2;
-    yDataList[minIndex]['endLabel']['color'] = '#9A60B4';
-    yDataList[minIndex]['endLabel']['backgroundColor'] = '#111';
-    yDataList[minIndex]['z'] = 999;
-  }
-}
-
-// 根据风量计算压差
-function computePa() {
-  debugger;
-  const R = uH.value / Number(uQ.value) / Number(uQ.value);
-  const pointX = Number(uQ.value);
-  const pointY = Number(uH.value);
-  type ItemType = {
-    x: number;
-    y: number;
-    Hz: number;
-  };
-  const paList = new Map<number, ItemType>(); // key 是最近距离
-  const getIntersectionPoint = (a, b, c, R, min, max) => {
-    const obj: { x: undefined | number; y: undefined | number; min: number; max: number } = { x: undefined, y: undefined, min: min, max: max };
-    // 计算二次方程的判别式
-    const discriminant = b * b - 4 * (a - R) * c;
-
-    if (discriminant > 0) {
-      // 有两个实根
-      const x1 = (-b + Math.sqrt(discriminant)) / (2 * (a - R));
-      const x2 = (-b - Math.sqrt(discriminant)) / (2 * (a - R));
-
-      const y1 = R * x1 * x1;
-      const y2 = R * x2 * x2;
-      if (x1 >= min && x1 <= max) {
-        obj.x = x1;
-        obj.y = y1;
-      } else {
-        obj.x = x2;
-        obj.y = y2;
-      }
-    } else if (discriminant === 0) {
-      // 有一个实根
-      const x = -b / (2 * (a - R));
-      const y = R * x * x;
-      if (x >= min && x <= max) {
-        obj.x = x;
-        obj.y = y;
-      }
-      // console.log(`唯一交点: (${x}, ${y})`);
-    } else {
-      // 没有实根，交点在虚数域
-      console.log('没有实数交点');
-      isHaCross.value = false;
+    .input-title {
+      max-width: 150px;
     }
-    return obj;
-  };
-
-  for (let key in assistanceData.value) {
-    const item: AssistanceItemType = assistanceData.value[key];
-    paList.set(item.Hz, getIntersectionPoint(item.a, item.b, item.c, R, item.min, item.max));
-  }
-
-  const min = (points: Map<number, ItemType>) => {
-    const targetX = uQ.value;
-    const targetY = uH.value;
-    let minDistance = Number.POSITIVE_INFINITY;
-    let closestPoint = null;
-    let keyVal = '';
-    // 遍历已知点数组，计算距离并更新最小距离和对应的点
-    for (const [key, point] of points) {
-      const distance = Math.sqrt((targetX - point.x) ** 2 + (targetY - point.y) ** 2);
-      if (distance < minDistance) {
-        minDistance = distance;
-        closestPoint = point;
-        keyVal = key;
-      }
+    .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;
 
-    if (closestPoint !== null) {
-      // console.log(`距离最小的点是 (${closestPoint.x}, ${closestPoint.y}), 距离为 ${minDistance}`);
-      if (closestPoint.x < closestPoint.min || closestPoint.x > closestPoint.max) {
-        resultObj.value = null;
-        isHaCross.value = false;
-        console.log('没有找到最小距离的点');
-      } else {
-        resultObj.value = { x: closestPoint.x, y: closestPoint.y, Hz: keyVal };
-        isHaCross.value = true;
+      &::before {
+        position: absolute;
+        display: block;
+        content: '';
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        top: 2px;
+        left: 2px;
+        border-radius: 2px;
+        z-index: -1;
       }
-    } else {
-      resultObj.value = null;
-      isHaCross.value = false;
-      console.log('没有找到最小距离的点');
     }
-  };
-  min(paList);
-}
 
-function computeR() {
-  if (uQ.value && uH.value) {
-    computeRLine();
-    computePa();
-    const x = resultObj.value && resultObj.value.x ? resultObj.value.x.toFixed(0) : -100;
-    const y = resultObj.value && resultObj.value.y ? Number(resultObj.value.y.toFixed(0)) : -100;
-    const series = {
-      type: 'effectScatter',
-      symbolSize: 5,
-      // symbolOffset:[1, 1],
-      showEffectOn: 'render',
-      // 涟漪特效相关配置。
-      rippleEffect: {
-        // 波纹的绘制方式，可选 'stroke' 和 'fill'。
-        brushType: 'stroke',
-      },
-      zlevel: 1,
-      z: 999,
-      itemStyle: {
-        color: '#C60000',
-      },
-      data: [[x, y]],
-    };
-    yDataList[lineNum + 1] = series;
-  }
-  // // 根据计算后的得到的频率，风量，瓦斯浓度
-  // getMonitor();
-}
-
-function getMonitor() {
-  clearTimeout(timer);
-  timer = undefined;
-  const n = 10;
-  const windQuantity = uQ1.value;
-  const obj = {
-    m3: windQuantity,
-    gas: gasWarningVal.value,
-    time: '',
-    Hz: uHz.value,
-  };
-  const monitorList: { m3: number; gas: number; Hz: number; time: string }[] = [];
-  for (let i = 0; i < n; i++) {
-    const item = cloneDeep(obj);
-    const m3Temp = (Math.random() * 2 - 1) * Math.random() * 20;
-    const gas = m3Temp * 0.0002;
-    item.time = dayjs(new Date().getTime() - (n + i) * 3000).format('HH:mm:ss');
-    item.m3 = (obj.m3 + m3Temp).toFixed(2);
-    item.gas = (obj.gas + gas).toFixed(4);
-    item.Hz = (obj.Hz + Math.random()).toFixed(2);
-    monitorList.unshift(item);
-  }
-  monitorData.value = cloneDeep(monitorList);
+    .btn1 {
+      border: 1px solid #5cfaff;
 
-  setTimeout(() => {
-    clearTimeout(timer);
-    timer = undefined;
-
-    timer = 0;
-    if (uQ1.value && uH.value && uQ.value) {
-      openTimer(cloneDeep(obj), 0);
-    } else {
-      openTimer(cloneDeep(obj), 0);
-    }
-  }, 1000);
-}
-
-function startCompute() {
-  setTimeout(() => {
-    message.success('指令下发成功！');
-    isStartCompute.value = 1;
-  }, 800);
-}
-
-function resetCompute() {
-  setTimeout(() => {
-    message.success('指令下发成功！');
-    isStartCompute.value = -1;
-    tempList.length = 0;
-    n = 0;
-  }, 800);
-}
-
-let timer = undefined;
-let n = 0;
-let tempList = [];
-function openTimer(obj: { m3: number; gas: number; Hz: number; time: string }) {
-  // 打开定时器
-  const monitorList = cloneDeep(monitorData.value);
-  if (timer !== undefined) {
-    timer = setTimeout(() => {
-      obj.m3 = Number(obj.m3);
-      obj.gas = Number(obj.gas);
-      obj.Hz = Number(obj.Hz);
-      const item = cloneDeep(obj);
-      item.time = dayjs(new Date().getTime()).format('HH:mm:ss');
-      if (resultObj.value && resultObj.value.x && resultObj.value.y && isStartCompute.value != 0) {
-        if (isStartCompute.value == 1 && Number(obj.m3) > uQ.value && Number(obj.gas) < gasWarningMax.value) {
-          isStartCompute.value = 0;
-          n = 0;
-        } else if (isStartCompute.value == -1 && Number(obj.m3) < uQ1.value) {
-          isStartCompute.value = 0;
-          n = 0;
-        }
+      &::before {
+        background-image: linear-gradient(#2effee92, #0cb1d592);
       }
 
-      if (!isStartCompute.value) {
-        const m3Temp = (Math.random() * 2 - 1) * Math.random() * Math.random() * 10;
-        const gas = m3Temp * 0.0002;
-        item.m3 = (obj.m3 + m3Temp).toFixed(2);
-        item.gas = (obj.gas + gas).toFixed(4);
-        item.Hz = (obj.Hz + Math.random()).toFixed(2);
-        n = 0;
-      } else {
-        if (n < 2) {
-          const item1 = cloneDeep(obj);
-          const m3Temp = Math.random() * Math.random() * 10;
-          const gas = m3Temp * 0.0002;
-          item1.m3 = (obj.m3 + m3Temp).toFixed(2);
-          item1.gas = (obj.gas + gas).toFixed(4);
-          item1.Hz = (obj.Hz + (Math.random() * 2 - 1) * Math.random()).toFixed(2);
-          tempList.push(item1);
-        }
+      &:hover {
+        border: 1px solid #5cfaffaa;
 
-        // 计算  uQ1 -> uQ  gas -> gasWarningMax.value Hz -> resultObj.value.Hz
-        if (isStartCompute.value == 1) {
-          if (resultObj.value.Hz - obj.Hz > 0) {
-            item.Hz = (uHz.value + (2 * n * (resultObj.value.Hz - uHz.value)) / 20).toFixed(2);
-            if (resultObj.value.Hz - obj.Hz < 0) {
-              item.Hz = (resultObj.value.Hz + Math.random() * 0.5).toFixed(2);
-            }
-          } else {
-            // item.Hz = (resultObj.value.Hz + (Math.random() * 2 - 1) * Math.random() * 2).toFixed(2);
-            item.Hz = (resultObj.value.Hz + Math.random() * 0.5).toFixed(2);
-          }
-          item.m3 = (obj.m3 + (0.027 * n * item.Hz * (item.Hz - uHz.value) * (uQ.value - uQ1.value)) / 600).toFixed(2);
-          if (Number(item.m3) > uQ.value) {
-            item.m3 = (uQ.value + Math.random() * 10).toFixed(2);
-          }
-          item.gas = (
-            gasWarningVal.value -
-            (0.015 * item.Hz * n * (item.Hz - uHz.value) * (gasWarningVal.value - gasWarningMax.value)) / 200
-          ).toFixed(4);
-        } else {
-          // 复位
-          if (obj.Hz - uHz.value > 0) {
-            item.Hz = (obj.Hz - (2 * n * (resultObj.value.Hz - uHz.value)) / 30).toFixed(2);
-            if (item.Hz - uHz.value < 0) {
-              item.Hz = uHz.value - 0.3;
-            }
-          } else {
-            item.Hz = (uHz.value + (Math.random() * 2 - 1) * Math.random() * 2).toFixed(2);
-          }
-          item.m3 = (obj.m3 - (0.02 * n * n * item.Hz * (resultObj.value.Hz - uHz.value) * (uQ.value - uQ1.value)) / 400).toFixed(2);
-          if (item.m3 < uQ1.value) {
-            item.m3 = uQ1.value - Math.random() * 10;
-          }
-          item.gas = (obj.gas + (0.015 * item.Hz * n * (uHz.value - item.Hz) * (gasWarningVal.value - gasWarningMax.value)) / 800).toFixed(4);
-        }
-      }
-      if (monitorList.length >= 10) {
-        monitorList.shift();
-        const monitor = cloneDeep(item);
-        const data = tempList.shift();
-        if (data) {
-          item['m3'] = data['m3'];
-          item['gas'] = data['gas'];
+        &::before {
+          background-image: linear-gradient(#2effee72, #0cb1d572);
         }
-        tempList.push(monitor);
-        monitorList.push(item);
-      } else {
-        monitorList.push(item);
-      }
-      monitorData.value = monitorList;
-      // console.log('瓦斯监测数据-------------->', monitorData.value);
-      if (timer) {
-        if (!isStartCompute.value) {
-          // n++;
-          openTimer(cloneDeep(obj));
-        } else {
-          n++;
-          openTimer(cloneDeep(item));
-        }
-      }
-    }, 3000);
-  }
-}
-
-function edit(flag) {
-  if (flag == 'info') {
-    formType.value = '编辑风机信息';
-  }
-  if (flag == 'line') {
-    formType.value = '编辑特性曲线';
-  }
-  if (formShow.value == true) {
-    formShow.value = false;
-    nextTick(() => {
-      formShow.value = true;
-    });
-  } else {
-    formShow.value = true;
-  }
-}
-
-function onSubmit() {
-  emit('close');
-  closeModal();
-  ChartRef.value = null;
-  uQ.value = undefined;
-  uH.value = undefined;
-  formType.value = '';
-  refresh.value = true;
-  xData.length = 0;
-  yDataList.length = 0;
-  lineNum = 0;
-  lineEquation.value = [];
-  resultObj.value = null;
-  monitorData.value = [];
-  clearTimeout(timer);
-  timer = undefined;
-}
-
-async function onCancel() {
-  return new Promise((resolve) => {
-    if (isStartCompute.value == 0) {
-      onSubmit();
-      resolve(true);
-    } else {
-      message.warning('为保障矿井安全生产，请确保已复位！！！');
-      resolve(false);
-    }
-  });
-}
-
-function initEcharts() {
-  if (ChartRef.value) {
-    reSetLine();
-    myChart.value = echarts.init(ChartRef.value);
-    option && myChart.value.setOption(option);
-    refresh.value = false;
-    getMonitor();
-    nextTick(() => {
-      setTimeout(() => {
-        refresh.value = true;
-      }, 0);
-    });
-  }
-}
-
-function makeLine() {
-  if (uQ.value && uH.value) {
-    loadding.value = true;
-    setTimeout(() => {
-      computeR();
-      reSetLine();
-      option && myChart.value.setOption(option);
-      loadding.value = false;
-    }, 1200);
-  }
-}
-function handleSubmit() {
-  message.success('提交成功');
-  setTimeout(() => {
-    formShow.value = false;
-  }, 800);
-}
-onMounted(() => {
-  timer = undefined;
-});
-</script>
-
-<style scoped lang="less">
-.modal-box {
-  width: 100%;
-  height: 300px;
-  display: flex;
-  flex-direction: row;
-  background-color: #ffffff05;
-  padding: 20px 8px 0 8px;
-  border: 1px solid #00d8ff22;
-  position: relative;
-  // min-height: 600px;
-  .left-box {
-    width: 60%;
-    height: 300px;
-    background-image: url(../../../../../assets/images/dischargeGas.svg);
-    background-repeat: no-repeat;
-    background-size: 100%, 100%;
-  }
-  .box-title {
-    width: calc(100% - 40px);
-    text-align: center;
-    background-color: #1dc1f522;
-  }
-  .info-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2px 0px;
-    margin: 10px 0;
-    line-height: 30px;
-    background-image: linear-gradient(to right, #39deff15, #3977e500);
-    &:first-child {
-      margin-top: 0;
-    }
-    .title {
-      width: 200px;
-      text-align: left;
-      padding-left: 20px;
-      color: #f1f1f1cc;
-    }
-    .value {
-      width: 150px;
-      color: #00d8ff;
-      padding-right: 20px;
-      text-align: right;
-    }
-  }
-  .right-box {
-    width: 40%;
-    .info-lines {
-      width: calc(100% - 2px);
-      height: 230px;
-      box-shadow: 0px 0px 50px #86baff08 inset;
-      overflow-y: auto;
-      margin-top: 5px;
-      .title {
-        width: 100%;
-        color: #f1f1f1cc;
-      }
-    }
-  }
-  .center-box {
-    flex: 1;
-    margin: 0 10px;
-    display: flex;
-    .info-echarts {
-      // background-color: #ffffff11;
-    }
-    .result-tip {
-      text-align: center;
-      background-color: #00000011;
-      line-height: 28px;
-      margin: 10px 50px 0 50px;
-      border: 1px solid #00d8ff22;
-      border-radius: 2px;
-    }
-  }
-  .tip-box {
-    width: 1040px;
-    height: 44px;
-    position: absolute;
-    top: 417px;
-    display: flex;
-    padding: 0 20px;
-    .title {
-      width: 142px;
-      height: 43px;
-      display: flex;
-      align-items: center;
-      padding-left: 30px;
-      background-image: url('@/assets/images/fanlocal-tip/tip-title.png');
-      position: relative;
-      &::before {
-        content: '';
-        display: inline-block;
-        position: absolute;
-        width: 31px;
-        height: 31px;
-        top: 5px;
-        left: -8px;
-        background-image: url('@/assets/images/fanlocal-tip/tip-icon.png');
       }
     }
-    .tip-container {
-      width: 898px;
-      height: 44px;
-      line-height: 44px;
-      display: flex;
-      background-image: url('@/assets/images/fanlocal-tip/tip-bg.png');
-      background-size: cover;
-    }
-  }
-}
-.chart-box {
-  width: 1170px;
-}
-.setting-box {
-  width: 1170px;
-  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;
-    height: 40px;
-    margin: 0 10px;
-    justify-content: space-between;
   }
-  .left-buttons {
-    display: flex;
-    height: 40px;
 
-    .btn {
-      margin: 0 10px;
+  @keyframes open {
+    0% {
+      height: 0px;
     }
-  }
-  .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;
-
-    &::before {
-      position: absolute;
-      display: block;
-      content: '';
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      top: 2px;
-      left: 2px;
-      border-radius: 2px;
-      z-index: -1;
+    100% {
+      height: fit-content;
     }
   }
 
-  .btn1 {
-    border: 1px solid #5cfaff;
-
-    &::before {
-      background-image: linear-gradient(#2effee92, #0cb1d592);
+  @keyframes close {
+    0% {
+      height: fit-content;
     }
-
-    &:hover {
-      border: 1px solid #5cfaffaa;
-
-      &::before {
-        background-image: linear-gradient(#2effee72, #0cb1d572);
-      }
+    100% {
+      height: 0px;
     }
   }
-}
-.is-open {
-  animation: open 0.5s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-}
-.is-close {
-  height: 0px;
-}
-
-@keyframes open {
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: fit-content;
-  }
-}
-
-@keyframes close {
-  0% {
-    height: fit-content;
+  :deep(.zxm-divider-inner-text) {
+    color: #cacaca88 !important;
   }
-  100% {
-    height: 0px;
+  :deep(.zxm-form-item) {
+    margin-bottom: 10px;
   }
-}
-:deep(.zxm-divider-inner-text) {
-  color: #cacaca88 !important;
-}
-:deep(.zxm-form-item) {
-  margin-bottom: 10px;
-}
 </style>

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

@@ -1,274 +1,231 @@
 <template>
-  <a-modal title="按需供风联动" :visible="supplyAirModalVisible" @ok="handleOk" @cancel="handleCancel">
+  <BasicModal
+    @register="register"
+    title="按需供风联动"
+    :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }"
+    width="1200px"
+    v-bind="$attrs"
+    @ok="onSubmit"
+    @cancel="onCancel"
+    :canFullscreen="false"
+    :destroyOnClose="true"
+    :footer="null"
+    :maskClosable="false"
+  >
     <div class="modal-box">
-      <div class="left-box" style="width: 550px; height: 300px"> </div>
-      <div class="center-box"> </div>
+      <div class="left-box" style="width: 550px; height: 400px"> </div>
       <div class="right-box">
-        <!-- <div class="box-title">曲线方程</div> -->
-        <dv-decoration7 style="height: 20px">
-          <div class="box-title">风量数据</div>
-        </dv-decoration7>
-        <div class="info-lines">
-          <div class="right-box-inputs">
-            <div class="input-title" style="margin-top: 20px; line-height: 40px">出风口风量(m³/min)： <span></span></div>
-            <div class="input-title" style="margin-top: 20px; line-height: 40px">局扇供风量(m³/min)： <span></span></div>
-          </div>
-        </div>
+        <BarAndLine
+          class="echarts-line"
+          xAxisPropType="time"
+          height="400px"
+          :dataSource="echartsData"
+          :chartsColumns="chartsColumnList1"
+          :option="echatsOption"
+        />
       </div>
-      <div class="tip-box"> </div>
     </div>
     <div class="setting-box">
       <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="uQ1" />
+          <InputNumber class="input-box" size="large" v-model:value="dataSource['ductOutletAirVolume_merge']" />
           <div class="input-title">局扇供风量(m³/min)：</div>
-          <InputNumber class="input-box" size="large" v-model:value="uH" />
+          <InputNumber class="input-box" size="large" v-model:value="dataSource['inletAirVolume_merge']" />
         </div>
       </div>
     </div>
-  </a-modal>
+  </BasicModal>
 </template>
 
 <script lang="ts" setup>
-import { ref, defineProps, defineEmits } from 'vue';
-
-const props = defineProps({
-  supplyAirModalVisible: Boolean,
-});
-
-const emit = defineEmits(['close']);
-
-function handleOk() {
-  emit('close');
-}
-
-function handleCancel() {
-  emit('close');
-}
+  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();
+    });
+  });
+  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);
+    }
+  );
+  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();
+  });
 </script>
 
 <style scoped lang="less">
-.modal-box {
-  display: flex;
-  flex-direction: row;
-  background-color: #ffffff05;
-  padding: 20px 8px 0 8px;
-  border: 1px solid #00d8ff22;
-  position: relative;
-  // min-height: 600px;
-  .left-box {
-    height: 300px;
-    background-image: url(../../../../../assets/images/supplyAir.svg);
-    background-repeat: no-repeat;
-    background-size: 100%, 100%;
-  }
-  .box-title {
-    width: calc(100% - 40px);
-    text-align: center;
-    background-color: #1dc1f522;
-  }
-  .info-item {
+  .modal-box {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2px 0px;
-    margin: 10px 0;
-    line-height: 30px;
-    background-image: linear-gradient(to right, #39deff15, #3977e500);
-    &:first-child {
-      margin-top: 0;
-    }
-    .title {
-      width: 200px;
-      text-align: left;
-      padding-left: 20px;
-      color: #f1f1f1cc;
+    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; /* 确保背景图片居中 */
     }
-    .value {
-      width: 150px;
-      color: #00d8ff;
-      padding-right: 20px;
-      text-align: right;
+    .right-box {
+      flex: 1; /* 占据 3/4 的空间 */
+      height: 400px;
+      width: 100%;
     }
   }
-  .right-box {
-    width: 320px;
-    .info-lines {
-      width: calc(100% - 2px);
-      height: 230px;
-      box-shadow: 0px 0px 50px #86baff08 inset;
-      overflow-y: auto;
-      margin-top: 5px;
-      .title {
-        width: 100%;
-        color: #f1f1f1cc;
-      }
-      .right-box-inputs {
-        height: 80px;
+  .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;
+      height: 40px;
+      margin: 0 10px;
+      justify-content: space-between;
+    }
+    .left-buttons {
+      display: flex;
+      height: 40px;
+
+      .btn {
+        margin: 0 10px;
       }
     }
-  }
-  .center-box {
-    flex: 1;
-    margin: 0 10px;
-    display: flex;
-    .info-echarts {
-      // background-color: #ffffff11;
+    .border-clip {
+      width: 1px;
+      height: 25px;
+      border-right: 1px solid #8b8b8b77;
     }
-    .result-tip {
-      text-align: center;
-      background-color: #00000011;
-      line-height: 28px;
-      margin: 10px 50px 0 50px;
-      border: 1px solid #00d8ff22;
-      border-radius: 2px;
+    .input-title {
+      max-width: 150px;
     }
-  }
-  .tip-box {
-    width: 1040px;
-    height: 44px;
-    position: absolute;
-    top: 417px;
-    display: flex;
-    padding: 0 20px;
-    .title {
-      width: 142px;
-      height: 43px;
-      display: flex;
-      align-items: center;
-      padding-left: 30px;
-      background-image: url('@/assets/images/fanlocal-tip/tip-title.png');
+    .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;
+
       &::before {
-        content: '';
-        display: inline-block;
         position: absolute;
-        width: 31px;
-        height: 31px;
-        top: 5px;
-        left: -8px;
-        background-image: url('@/assets/images/fanlocal-tip/tip-icon.png');
+        display: block;
+        content: '';
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        top: 2px;
+        left: 2px;
+        border-radius: 2px;
+        z-index: -1;
       }
     }
-    .tip-container {
-      width: 898px;
-      height: 44px;
-      line-height: 44px;
-      display: flex;
-      background-image: url('@/assets/images/fanlocal-tip/tip-bg.png');
-      background-size: cover;
-    }
-  }
-}
-.setting-box {
-  width: 1170px;
-  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;
-    height: 40px;
-    margin: 0 10px;
-    justify-content: space-between;
-  }
-  .left-buttons {
-    display: flex;
-    height: 40px;
+    .btn1 {
+      border: 1px solid #5cfaff;
 
-    .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;
-    border-radius: 2px;
-    color: #fff;
-    width: fit-content;
-    cursor: pointer;
+      &::before {
+        background-image: linear-gradient(#2effee92, #0cb1d592);
+      }
 
-    &::before {
-      position: absolute;
-      display: block;
-      content: '';
-      width: calc(100% - 4px);
-      height: calc(100% - 4px);
-      top: 2px;
-      left: 2px;
-      border-radius: 2px;
-      z-index: -1;
+      &:hover {
+        border: 1px solid #5cfaffaa;
+
+        &::before {
+          background-image: linear-gradient(#2effee72, #0cb1d572);
+        }
+      }
     }
   }
 
-  .btn1 {
-    border: 1px solid #5cfaff;
-
-    &::before {
-      background-image: linear-gradient(#2effee92, #0cb1d592);
+  @keyframes open {
+    0% {
+      height: 0px;
     }
-
-    &:hover {
-      border: 1px solid #5cfaffaa;
-
-      &::before {
-        background-image: linear-gradient(#2effee72, #0cb1d572);
-      }
+    100% {
+      height: fit-content;
     }
   }
-}
-.is-open {
-  animation: open 0.5s;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-}
-.is-close {
-  height: 0px;
-}
 
-@keyframes open {
-  0% {
-    height: 0px;
-  }
-  100% {
-    height: fit-content;
+  @keyframes close {
+    0% {
+      height: fit-content;
+    }
+    100% {
+      height: 0px;
+    }
   }
-}
-
-@keyframes close {
-  0% {
-    height: fit-content;
+  :deep(.zxm-divider-inner-text) {
+    color: #cacaca88 !important;
   }
-  100% {
-    height: 0px;
+  :deep(.zxm-form-item) {
+    margin-bottom: 10px;
   }
-}
-:deep(.zxm-divider-inner-text) {
-  color: #cacaca88 !important;
-}
-:deep(.zxm-form-item) {
-  margin-bottom: 10px;
-}
 </style>

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

@@ -3663,7 +3663,32 @@ export const chartsColumnList = [
     dataIndex: 'Hz',
   },
 ];
-
+export const chartsColumnList1 = [
+  {
+    legend: '目标风量',
+    seriesName: '(m³/min)',
+    ymax: 1100,
+    yname: 'm³/min',
+    linetype: 'line',
+    yaxispos: 'left',
+    color: '#00FFA8',
+    sort: 1,
+    xRotate: 0,
+    dataIndex: 'm3',
+  },
+  {
+    legend: '供风量',
+    seriesName: '(m³/min)',
+    ymax: 1100,
+    yname: 'm³/min',
+    linetype: 'line',
+    yaxispos: 'right',
+    color: '#FDB146',
+    sort: 2,
+    xRotate: 0,
+    dataIndex: 'm3',
+  },
+];
 export const initData = () => {
   const num = 3;
   const obj = {

src/views/vent/monitorManager/windrectMonitor/index.vue

@@ -47,7 +47,7 @@
       <dv-border-box8 :dur="5" :style="`padding: 5px; height: ${scroll.y + 120}px`">
         <div class="tabs-button-group">
           <a-button v-if="hasPermission('windrect:handler')" class="tabs-button" type="primary" @click="openModel">一键测风</a-button>
-          <a-button v-if="hasPermission('windrect:reset')" class="tabs-button" type="primary" @click="resetHandle">一键复位</a-button>
+          <a-button class="tabs-button" type="primary" @click="resetHandle">一键复位</a-button>
         </div>
         <a-tabs class="tabs-box" v-model:activeKey="activeKey" @change="tabChange">
           <a-tab-pane key="1" tab="实时监测">