提交删除文件

src/views/vent/monitorManager/alarmMonitor/AlarmHistoryTable.vue

@@ -1,237 +0,0 @@
-<template>
-  <div class="history-table">
-    <BasicTable ref="historyTable" @register="registerTable">
-      <template #bodyCell="{ column, record }">
-        <slot name="filterCell" v-bind="{ column, record }"></slot>
-      </template>
-    </BasicTable>
-  </div>
-</template>
-
-<script lang="ts" name="system-user" setup>
-  //ts语法
-  import { watchEffect, ref, watch, defineExpose } from 'vue';
-  import { FormSchema } from '/@/components/Form/index';
-  import { BasicTable } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { warningHistoryList } from './alarm.api';
-  import dayjs from 'dayjs';
-  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
-
-  const historyTable = ref();
-
-  const emit = defineEmits(['change']);
-  const props = defineProps({
-    columnsType: {
-      type: String,
-    },
-    columns: {
-      type: Array,
-      // required: true,
-      default: () => [],
-    },
-    deviceType: {
-      type: String,
-    },
-    designScope: {
-      type: String,
-    },
-    sysId: {
-      type: String,
-    },
-    scroll: {
-      type: Object,
-      default: { y: 0 },
-    },
-    formSchemas: {
-      type: Array<FormSchema>,
-      default: () => [],
-    },
-  });
-  const columns = ref([]);
-  const tableScroll = props.scroll.y ? ref({ y: props.scroll.y - 100 }) : ref({});
-
-  watch(
-    () => {
-      return props.columnsType;
-    },
-    (newVal) => {
-      if (!newVal) return;
-      const column = getTableHeaderColumns(newVal + '_history');
-      if (column && column.length < 1) {
-        const arr = newVal.split('_');
-        const columnKey = arr.reduce((prev, cur, index) => {
-          if (index !== arr.length - 2) {
-            return prev + '_' + cur;
-          } else {
-            return prev;
-          }
-        });
-        columns.value = getTableHeaderColumns(arr[0] + '_history');
-      } else {
-        columns.value = column;
-      }
-      if (historyTable.value) reload();
-    },
-    {
-      immediate: true,
-    }
-  );
-
-  watch(
-    () => props.scroll.y,
-    (newVal) => {
-      if (newVal) {
-        tableScroll.value = { y: newVal - 100 };
-      } else {
-        tableScroll.value = {};
-      }
-    }
-  );
-
-  // 列表页面公共参数、方法
-  const { tableContext } = useListPage({
-    tableProps: {
-      api: warningHistoryList,
-      columns: props.columnsType ? columns : (props.columns as any[]),
-      canResize: true,
-      showTableSetting: false,
-      showActionColumn: false,
-      bordered: false,
-      size: 'small',
-      scroll: tableScroll,
-      formConfig: {
-        labelAlign: 'left',
-        showAdvancedButton: false,
-        // autoAdvancedCol: 2,
-
-        baseColProps: {
-          // offset: 0.5,
-          xs: 24,
-          sm: 24,
-          md: 24,
-          lg: 9,
-          xl: 7,
-          xxl: 4,
-        },
-        schemas:
-          props.formSchemas.length > 0
-            ? props.formSchemas
-            : [
-                // {
-                //   label: '报警时间区间',
-                //   field: 'tickectDate',
-                //   component: 'TimeRangePicker',
-                //   componentProps: {
-                //     placeholder: ['报警开始时间', '报警结束时间'],
-                //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                //   },
-                // },
-                {
-                  field: 'starttime_begin',
-                  label: '开始时间',
-                  component: 'DatePicker',
-                  defaultValue: dayjs().subtract(1, 'day'),
-                  required: true,
-                  labelWidth: 140,
-                  componentProps: {
-                    showTime: true,
-                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                    getPopupContainer: getAutoScrollContainer,
-                  },
-                },
-                {
-                  field: 'starttime_end',
-                  label: '结束时间',
-                  component: 'DatePicker',
-                  required: true,
-                  defaultValue: dayjs(),
-                  labelWidth: 140,
-                  componentProps: {
-                    showTime: true,
-                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
-                    getPopupContainer: getAutoScrollContainer,
-                  },
-                },
-              ],
-        // fieldMapToTime: [['tickectDate', ['starttime_begin', 'starttime_end'], '']],
-      },
-      fetchSetting: {
-        listField: 'records',
-        pageField: 'pages',
-        sizeField: 'size',
-        totalField: 'total',
-      },
-      beforeFetch(params) {
-        params.strtype = props.deviceType + '*';
-        if (props.sysId) {
-          params.sysId = props.sysId;
-        }
-        if (params['datalist.pages']) params['pages'] = params['datalist.pages'];
-        if (params['datalist.size']) params['pageSize'] = params['datalist.size'];
-      },
-      afterFetch(resultItems) {
-        resultItems.map((item) => {
-          Object.assign(item, item['readData']);
-        });
-        return resultItems;
-      },
-    },
-  });
-  //注册table数据
-  const [registerTable, { getDataSource, reload, setLoading }] = tableContext;
-
-  watchEffect(() => {
-    if (historyTable.value && getDataSource) {
-      const data = getDataSource() || [];
-      emit('change', data);
-      console.log('[ data ] >', data);
-    }
-  });
-
-  defineExpose({ setLoading });
-</script>
-
-<style scoped lang="less">
-  @import '/@/design/vent/color.less';
-
-  :deep(.@{ventSpace}-table-body) {
-    height: auto !important;
-  }
-  :deep(.zxm-picker) {
-    height: 30px !important;
-  }
-  .history-table {
-    width: 100%;
-    :deep(.jeecg-basic-table-form-container) {
-      .@{ventSpace}-form {
-        padding: 0 !important;
-        border: none !important;
-        margin-bottom: 0 !important;
-        .@{ventSpace}-picker,
-        .@{ventSpace}-select-selector {
-          width: 100% !important;
-          height: 100%;
-          background: #00000017;
-          border: 1px solid #b7b7b7;
-          input,
-          .@{ventSpace}-select-selection-item,
-          .@{ventSpace}-picker-suffix {
-            color: #fff;
-          }
-          .@{ventSpace}-select-selection-placeholder {
-            color: #ffffffaa;
-          }
-        }
-      }
-      .@{ventSpace}-table-title {
-        min-height: 0 !important;
-      }
-    }
-  }
-
-  ::v-deep .zxm-table-content {
-    overflow: hidden !important;
-  }
-</style>

src/views/vent/monitorManager/alarmMonitor/alarm.api.ts

@@ -1,42 +0,0 @@
-import { defHttp } from '/@/utils/http/axios';
-
-enum Api {
-  list = '/ventanaly-device/monitor/device',
-  baseList = '/safety/ventanalyWindow/list',
-  warningList = '/safety/ventanalyAlarmLog/now_alarmlist',
-  warningHistoryList = '/safety/ventanalyAlarmLog/list',
-  totalList = '/safety/ventanalyAlarmLog/total',
-
-  sysTypeWarnList = '/ventanaly-device/safety/ventanalyAlarmLog/sysTypeWarn',
-  sysWarn = '/ventanaly-device/safety/ventanalyAlarmLog/sysWarn',
-}
-/**
- * 列表接口
- * @param params
- */
-export const list = (params) => defHttp.post({ url: Api.list, params });
-
-/**
- * 保存或者更新用户
- * @param params
- */
-export const getTableList = (params) => defHttp.get({ url: Api.baseList, params });
-
-export const warningList = (params) => defHttp.get({ url: Api.warningList, params });
-
-export const warningHistoryList = (params) => defHttp.get({ url: Api.warningHistoryList, params });
-
-//预警列表接口
-export const getTotalList = (params) => defHttp.get({ url: Api.totalList, params });
-
-/**
- *预警详情弹窗左侧
- * @param params
- */
-export const sysTypeWarnList = (params) => defHttp.post({ url: Api.sysTypeWarnList, params });
-
-/**
- *预警详情弹窗右侧
- * @param params
- */
-export const sysWarn = (params) => defHttp.post({ url: Api.sysWarn, params });

src/views/vent/monitorManager/alarmMonitor/common.api.ts

@@ -1,18 +0,0 @@
-import { defHttp } from '/@/utils/http/axios';
-
-enum Api {
-  sysTypeWarnList = '/ventanaly-device/safety/ventanalyAlarmLog/sysTypeWarn',
-  sysWarn = '/ventanaly-device/safety/ventanalyAlarmLog/sysWarn',
-}
-
-/**
- *预警详情弹窗左侧
- * @param params
- */
-export const sysTypeWarnList = (params) => defHttp.post({ url: Api.sysTypeWarnList, params });
-
-/**
- *预警详情弹窗右侧
- * @param params
- */
- export const sysWarn = (params) => defHttp.post({ url: Api.sysWarn, params });

src/views/vent/monitorManager/alarmMonitor/common.data.ts

@@ -1,204 +0,0 @@
-import { reactive, markRaw, defineAsyncComponent } from 'vue';
-import { getAssetURL } from '/@/utils/ui';
-
-//中间区域数据-通风
-export const centerAreaListT1 = [
-    { id: 0, label: '进风量(m³/min)' },
-    { id: 1, label: '回风量(m³/min)' },
-    { id: 2, label: '需风量(m³/min)' },
-];
-//中间区域底部数据-通风
-export const centerAreaListB1 = [
-    {
-        id: 0,
-        content: '',
-    },
-    {
-        id: 1,
-        content: '',
-    },
-    {
-        id: 2,
-        content: '',
-    },
-];
-
-//内外因火灾菜单列表
-export const typeMenuList = [{ name: '内因火灾' }, { name: '外因火灾' },{name:'火灾指标'}];
-//瓦斯监测菜单列表
-export const typeMenuListGas = [{ name: '预警监测' }, { name: '预警指标' },];
-//当前加载组件
-export const componentName = {
-    fireWork: markRaw(defineAsyncComponent(() => import('./common/fireWork.vue'))),
-    closeWall: markRaw(defineAsyncComponent(() => import('./common/closeWall.vue'))),
-    mainWell: markRaw(defineAsyncComponent(() => import('./common/mainWell.vue'))),
-    warnTargetFire: markRaw(defineAsyncComponent(() => import('./common/warnTargetFire.vue'))),
-};
-//顶部区域数据
-export const topList = [
-    {
-        id: 0,
-        label: '最高温度(°C)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    {
-        id: 1,
-        label: '最低温度(°C)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    {
-        id: 2,
-        label: '平均温度(°C)',
-        imgSrc: true,
-        value: '--',
-        text: '',
-        list: [],
-    },
-    { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
-    {
-        id: 4,
-        imgSrc: false,
-        label: '回风隅角',
-        value: null,
-        text: '',
-        list: [
-            { id: 0, label: 'O₂', value: 0 },
-            { id: 1, label: 'CO', value: 0 },
-        ],
-    },
-];
-//束管监测选项列表
-export const contentList = [
-    {
-        id: 0,
-        list: [
-            {
-                id: '0-0',
-                title: 'O₂',
-                dw: '(%)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-            {
-                id: '0-1',
-                title: 'C₂H₄',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-        ],
-    },
-    {
-        id: 1,
-        list: [
-            {
-                id: '1-0',
-                title: 'CO',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-            {
-                id: '1-1',
-                title: 'CH₄',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-        ],
-    },
-    {
-        id: 2,
-        list: [
-            {
-                id: '2-0',
-                title: 'CO₂',
-                dw: '(%)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-            {
-                id: '2-1',
-                title: 'C₂H₂',
-                dw: '(ppm)',
-                label: '浓度 : ',
-                value: '--',
-                label1: '时间 : ',
-                time: '--',
-            },
-        ],
-    },
-];
-//外因火灾-工作面顶部区域数据
-export const topOutList = [
-    {
-      id: 0,
-      imgSrc: true,
-      label: '最高温度(°C)',
-      value: '0',
-      text: '',
-    },
-    {
-      id: 1,
-      imgSrc: true,
-      label: '最低温度(°C)',
-      value: '0',
-      text: '',
-    },
-    {
-      id: 2,
-      imgSrc: true,
-      label: '平均温度(°C)',
-      value: '0',
-      text: '',
-    },
-    { id: 3, imgSrc: false, label: '', value: null, text: '' },
-    // {
-    //   id: 4,
-    //   imgSrc: false,
-    //   label: '',
-    //   value: null,
-    //   text: '井下消防材料库',
-    // },
-  ];
-  //外因火灾-中间区域标题数据
-export const tabList = [
-    { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
-    { id: 1, label: '一氧化碳传感器监测', details: '设备类型名称' },
-    { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
-  ];
-  export const tabLists = [
-    { id: 0, label: '烟雾传感器监测', details: '设备类型名称' },
-    { id: 1, label: '温度传感器监测', details: '设备类型名称' },
-    { id: 2, label: '自动喷淋灭火装置监测', details: '设备类型名称' },
-    { id: 3, label: '一氧化碳传感器监测', details: '设备类型名称' },
-  ];
-  //外因火灾-传感器table列
-export const columns = [
-    { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
-    { rowIndex: 2, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
-    { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
-  ];
-  //外因火灾-烟雾传感器table列
-export const columnsSmoke = [
-    { rowIndex: 1, dataIndex: 'strinstallpos', title: '名称', type: '1', align: 'center' },
-    { rowIndex: 2, dataIndex: 'val', title: '值', type: '1', align: 'center' },
-    { rowIndex: 3, dataIndex: 'warnLevel_str', title: '状态', type: '1', align: 'center' },
-    { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
-  ];

src/views/vent/monitorManager/alarmMonitor/common/closeWall.vue

@@ -1,544 +0,0 @@
-<template>
-  <div class="closeWall">
-    <div class="title">
-      <div class="box-container">
-        <div class="contents">
-          <img src="../../../../../assets/images/fire/pie.png" alt="" />
-          <span class="text">{{ topContent.temperature }}</span>
-          <span class="dw">°C</span>
-        </div>
-        <div class="contents">
-          <div class="text">
-            <span class="text-label">位置 : </span>
-            <span class="text-value">{{ topContent.position }}</span>
-          </div>
-          <div class="text">
-            <span class="text-label">时间 : </span>
-            <span class="text-value">{{ topContent.time }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="box-container">
-        <div class="text1">{{ topContent.warn }}</div>
-      </div>
-    </div>
-    <div class="content">
-      <div class="title-b">采空区密闭参数</div>
-      <div class="card-btn">
-        <div
-          :class="activeIndex == index ? 'box-container1' : 'box-container'"
-          v-for="(item, index) in mbList"
-          :key="index"
-          @click="btnClick(item, index)"
-        >
-          <div class="box-label">
-            <span> {{ item.label }}</span>
-            <span>{{ item.dw }}</span>
-          </div>
-          <div class="box-item box-item1">
-            <span class="text-t">{{ `${item.label1}:` }}</span>
-            <span class="text-v">{{ item.nd }}</span>
-          </div>
-          <div class="box-item box-item2">
-            <span class="text-t">{{ `${item.label2}:` }}</span>
-            <span class="text-v">{{ item.time1 }}</span>
-          </div>
-          <div class="box-item box-item3">
-            <span class="text-t">{{ `${item.label3}:` }}</span>
-            <span class="text-v">{{ item.address }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="echart-box">
-        <div class="title-f">
-          <div class="title-text">{{ `${type}趋势` }}</div>
-        </div>
-        <div class="echarts-box">
-          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-  import echartLine1 from './echartLine1.vue';
-
-  let props = defineProps({
-    listData: Object,
-  });
-
-  //密闭-顶部区域数据
-  let topContent = reactive({
-    temperature: 0,
-    position: '',
-    time: '',
-    warn: '',
-  });
-  //密闭参数列表
-  let mbList = reactive([
-    {
-      label: 'O₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CO₂',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'CH₄',
-      dw: '(%)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'C₂H₂',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-    {
-      label: 'C₂H₄',
-      dw: '(ppm)',
-      label1: '浓度',
-      label2: '时间',
-      label3: '位置',
-      nd: '0',
-      time1: '',
-      address: '',
-    },
-  ]);
-
-  //当前密闭参数激活选项
-  let activeIndex = ref(0);
-  //当前激活密闭参数类型
-  let type = ref('O₂');
-
-  let echartDataSg1 = reactive({
-    xData: [],
-    yData: [],
-    lengedData: 'O₂',
-    lengedDataName: '(%)',
-  });
-  let echartDataSgList = reactive<any[]>([]);
-
-  //密闭参数选项切换
-  function btnClick(item, ind) {
-    activeIndex.value = ind;
-    type.value = item.label;
-    echartDataSg1.xData.length = 0;
-    echartDataSg1.yData.length = 0;
-    echartDataSg1.lengedData = type.value;
-    echartDataSg1.lengedDataName = item.dw;
-
-    switch (type.value) {
-      case 'O₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.o2val);
-        });
-        break;
-      case 'C₂H₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.ch2val);
-        });
-        break;
-      case 'CO':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.coval);
-        });
-        break;
-      case 'CH₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.chval);
-        });
-        break;
-      case 'CO₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.co2val);
-        });
-        break;
-      case 'C₂H₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg1.xData.push(el.time);
-          echartDataSg1.yData.push(el.gasval);
-        });
-        break;
-    }
-  }
-
-  watch(
-    () => props.listData,
-    (val) => {
-      console.log(val, 'val---');
-      echartDataSg1.xData.length = 0;
-      echartDataSg1.yData.length = 0;
-      echartDataSgList.length = 0;
-      if (JSON.stringify(val) != '{}') {
-        if (val.bundletube.length != 0) {
-          topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-          topContent.position = val.bundletube[0].strinstallpos || '--';
-          topContent.time = val.bundletube[0].readTime || '--';
-          topContent.warn =
-            val.bundletube[0].warnLevel == 0
-              ? '正常'
-              : val.bundletube[0].warnLevel == 101
-              ? '较低风险'
-              : val.bundletube[0].warnLevel == 102
-              ? '低风险'
-              : val.bundletube[0].warnLevel == 103
-              ? '中风险'
-              : val.bundletube[0].warnLevel == 104
-              ? '高风险'
-              : val.bundletube[0].warnLevel == 201
-              ? '报警'
-              : '正常';
-          mbList[0].nd = val.bundletube[0].readData.o2val || '--';
-          mbList[1].nd = val.bundletube[0].readData.coval || '--';
-          mbList[2].nd = val.bundletube[0].readData.co2val || '--';
-          mbList[3].nd = val.bundletube[0].readData.chval || '--';
-          mbList[4].nd = val.bundletube[0].readData.ch2val || '--';
-          mbList[5].nd = val.bundletube[0].readData.gasval || '--';
-          mbList.forEach((el) => {
-            el.time1 = val.bundletube[0] ? val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':')) : '--';
-            el.address = val.bundletube[0] ? val.bundletube[0].strinstallpos : '--';
-          });
-
-          val.bundletube[0].history.forEach((v) => {
-            echartDataSg1.xData.push(v.time);
-            if (echartDataSg1.lengedData == 'O₂') {
-              echartDataSg1.yData.push(v.o2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₄') {
-              echartDataSg1.yData.push(v.ch2val);
-            } else if (echartDataSg1.lengedData == 'CO') {
-              echartDataSg1.yData.push(v.coval);
-            } else if (echartDataSg1.lengedData == 'CH₄') {
-              echartDataSg1.yData.push(v.chval);
-            } else if (echartDataSg1.lengedData == 'CO₂') {
-              echartDataSg1.yData.push(v.co2val);
-            } else if (echartDataSg1.lengedData == 'C₂H₂') {
-              echartDataSg1.yData.push(v.gasval);
-            }
-            echartDataSgList.push(v);
-          });
-        } else {
-          topContent.temperature = 0;
-          topContent.position = '--';
-          topContent.time = '--';
-          topContent.warn = '正常';
-          mbList[0].nd = '--';
-          mbList[1].nd = '--';
-          mbList[2].nd = '--';
-          mbList[3].nd = '--';
-          mbList[4].nd = '--';
-          mbList[5].nd = '--';
-          mbList.forEach((el) => {
-            el.time1 = '--';
-            el.address = '--';
-          });
-        }
-      }
-    },
-    { immediate: true, deep: true }
-  );
-</script>
-
-<style lang="less" scoped>
-  .closeWall {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-
-    .title {
-      width: 100%;
-      height: 17%;
-      margin-bottom: 20px;
-      display: flex;
-      justify-content: space-between;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-      align-items: center;
-
-      .box-container {
-        display: flex;
-
-        &:nth-child(1) {
-          justify-content: space-around;
-          align-items: center;
-          flex: 2;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(2) {
-          flex: 1;
-          justify-content: center;
-          align-items: center;
-          height: 100%;
-        }
-
-        .contents {
-          height: 73%;
-
-          &:nth-child(1) {
-            width: 40%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            img {
-              position: relative;
-              width: 23%;
-              height: 100%;
-              background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-              background-size: 50% 50%;
-            }
-
-            .text {
-              font-family: 'douyuFont';
-              font-size: 28px;
-              margin: 0px 15px;
-              color: #3df6ff;
-            }
-
-            .dw {
-              font-size: 14px;
-              color: #b3b8cc;
-            }
-          }
-
-          &:nth-child(2) {
-            width: 60%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .text {
-              font-size: 14px;
-
-              .text-label {
-                color: #b3b8cc;
-                font-weight: bold;
-              }
-
-              .text-value {
-                font-family: 'douyuFont';
-                color: #3df6ff;
-                margin-left: 10px;
-              }
-            }
-          }
-        }
-
-        .text1 {
-          font-size: 16px;
-          color: #b3b8cc;
-          font-weight: bold;
-        }
-      }
-    }
-
-    .content {
-      width: 100%;
-      height: calc(83% - 20px);
-      padding: 10px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-
-      .title-b {
-        height: 30px;
-        line-height: 30px;
-        font-family: 'douyuFont';
-        font-size: 14px;
-        color: #fff;
-        // color: #3df6ff;
-      }
-
-      .card-btn {
-        height: 28%;
-        margin-bottom: 10px;
-        display: flex;
-        justify-content: space-between;
-
-        .box-container {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-          background-size: 100% 100%;
-          cursor: pointer;
-
-          .box-label {
-            position: absolute;
-            left: 50%;
-            top: 2px;
-            transform: translate(-50%);
-            color: #fff;
-          }
-
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
-
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
-          }
-
-          .box-item1 {
-            top: 24%;
-          }
-
-          .box-item2 {
-            top: 50%;
-          }
-
-          .box-item3 {
-            top: 75%;
-          }
-        }
-
-        .box-container1 {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: url('../../../../../assets/images/fire/2.png') no-repeat center;
-          background-size: 100% 100%;
-          cursor: pointer;
-
-          .box-label {
-            position: absolute;
-            left: 50%;
-            top: 2px;
-            transform: translate(-50%);
-            color: #fff;
-          }
-
-          .box-item {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 89%;
-            height: 16%;
-            padding: 0px 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .text-t {
-              width: 17%;
-              color: #fff;
-              font-size: 12px;
-            }
-
-            .text-v {
-              width: 83%;
-              font-family: 'douyuFont';
-              font-size: 10px;
-              color: #3df6ff;
-              display: flex;
-              justify-content: flex-end;
-            }
-          }
-
-          .box-item1 {
-            top: 19%;
-          }
-
-          .box-item2 {
-            top: 41%;
-          }
-
-          .box-item3 {
-            top: 63%;
-          }
-        }
-      }
-
-      .echart-box {
-        height: calc(72% - 41px);
-        border: 1px solid #114aac;
-
-        .title-f {
-          height: 40px;
-          padding: 0px 10px;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .title-text {
-            font-family: 'douyuFont';
-            font-size: 14px;
-            color: #fff;
-            // color: #3df6ff;
-          }
-        }
-
-        .echarts-box {
-          height: calc(100% - 40px);
-        }
-      }
-    }
-  }
-</style>

src/views/vent/monitorManager/alarmMonitor/common/echartLine.vue

@@ -1,285 +0,0 @@
-<template>
-  <div class="echartLine">
-    <div class="line" ref="line"></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { defineProps, ref, nextTick, reactive, watch, } from 'vue';
-import * as echarts from 'echarts';
-
-let props = defineProps({
-  echartDataGq: {
-    type: Object,
-  },
-  maxY: {
-    type: Number
-  },
-  echartDw: {
-    type: String
-  },
-  echartDw1:{
-    type:String,
-  }
-});
-//获取dom元素节点
-let line = ref<any>();
-let echartDataGqs = reactive({})
-watch(
-  () => props.echartDataGq,
-  (data) => {
-    echartDataGqs = Object.assign({}, data)
-    getOption();
-  },
-  { immediate: true, deep: true }
-);
-function getOption() {
-  nextTick(() => {
-    let myChart = echarts.init(line.value);
-    let option = {
-      grid: {
-        top: '15%',
-        left: '2%',
-        bottom: '6%',
-        right: '2%',
-        containLabel: true,
-      },
-      tooltip: {
-        trigger: 'item',
-        backgroundColor: 'rgba(0, 0, 0, .6)',
-        textStyle: {
-          color: '#fff',
-          fontSize: 12,
-        },
-      },
-      legend: {
-        align: 'left',
-        right: 'center',
-        top: '0%',
-        type: 'plain',
-        textStyle: {
-          color: '#7ec7ff',
-          fontSize: 14,
-        },
-        // icon:'rect',
-        itemGap: 25,
-        itemWidth: 18,
-        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-        data: [
-          {
-            name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData  : '',
-          },
-          {
-            name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
-          },
-
-          {
-            name:echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : ''
-          }
-        ],
-      },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          axisLabel: {
-            // formatter: '{value}',
-            fontSize: 14,
-            margin: 20,
-            textStyle: {
-              color: '#b3b8cc',
-            },
-            formatter: function (params) {
-              let newParamsName = ref('')  // 最终拼接成的字符串
-              let paramsNameNumber = ref(params.length) // 实际标签的个数
-              let provideNumber = ref(10)  // 每行能显示的字的个数
-              let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
-              /**
-               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-               */
-              // 条件等同于rowNumber>1
-              if (paramsNameNumber.value > provideNumber.value) {
-                /** 循环每一行,p表示行 */
-                for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = '' // 表示每一次截取的字符串
-                  var start = p * provideNumber.value // 开始截取的位置
-                  var end = start + provideNumber.value // 结束截取的位置
-                  // 此处特殊处理最后一行的索引值
-                  if (p == rowNumber - 1) {
-                    // 最后一次不换行
-                    tempStr = params.substring(start, paramsNameNumber.value)
-                  } else {
-                    // 每一次拼接字符串并换行
-                    tempStr = params.substring(start, end) + '\n'
-                  }
-                  newParamsName.value += tempStr // 最终拼成的字符串
-                }
-              } else {
-                // 将旧标签的值赋给新标签
-                newParamsName.value = params
-              }
-              //将最终的字符串返回
-              return newParamsName.value
-            }
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(14, 53, 95)',
-            },
-          },
-          splitLine: {
-            show: false,
-            //   lineStyle: {
-            //     color: '#243753',
-            //   },
-          },
-          axisTick: {
-            show: false,
-          },
-          data: echartDataGqs.xData ? echartDataGqs.xData : [],
-        },
-      ],
-      yAxis: [
-        {
-          boundaryGap: false,
-          type: 'value',
-          max: props.maxY,
-          axisLabel: {
-            textStyle: {
-              color: '#b3b8cc',
-            },
-            formatter:'{value}'
-          },
-          name: props.echartDw,
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: 12,
-            lineHeight: 10,
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(14, 53, 95)',
-            },
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(14, 53, 95)',
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-        },
-        {
-          boundaryGap: false,
-          type: 'value',
-          max: props.maxY,
-          axisLabel: {
-            textStyle: {
-              color: '#b3b8cc',
-            },
-            formatter:'{value}'
-          },
-          name: props.echartDw1,
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: 12,
-            lineHeight: 10,
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(14, 53, 95)',
-            },
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(14, 53, 95)',
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-        },
-      ],
-      series: [
-        {
-          name: echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
-          type: 'line',
-          smooth: true,
-          showSymbol: true,
-          symbolSize: 8,
-          zlevel: 3,
-          itemStyle: {
-            color: '#19a3df',
-            borderColor: '#a3c8d8',
-          },
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: '#19a3df',
-            },
-          },
-          data: echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
-        },
-        {
-          name: echartDataGqs.minData ? echartDataGqs.minData.lengedData : '',
-          type: 'line',
-          smooth: true,
-          showSymbol: true,
-          symbolSize: 8,
-          zlevel: 3,
-          itemStyle: {
-            color: '#4fffad',
-            borderColor: '#a3c8d8',
-          },
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: '#4fffad',
-            },
-          },
-          data: echartDataGqs.minData ? echartDataGqs.minData.data : [],
-        },
-        {
-          name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
-          type: 'line',
-          smooth: true,
-          showSymbol: true,
-          symbolSize: 8,
-          zlevel: 3,
-          itemStyle: {
-            color: '#fc8452',
-            borderColor: '#a3c8d8',
-          },
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: '#fc8452',
-            },
-          },
-
-          data: echartDataGqs.aveValue ? echartDataGqs.aveValue.data : [],
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-</script>
-
-<style scoped lang="less">
-.echartLine {
-  width: 100%;
-  height: 100%;
-
-  .line {
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/common/echartLine1.vue

@@ -1,232 +0,0 @@
-<template>
-    <div class="echartLine">
-        <div class="line" ref="line"></div>
-    </div>
-</template>
-  
-<script lang="ts" setup>
-import * as echarts from 'echarts'
-import { ref, nextTick, reactive, watch, defineProps } from 'vue';
-let props = defineProps({
-    echartDataSg: {
-        type: Object,
-    },
-    lengedDataName: {
-        type: String,
-    }
-})
-
-//获取dom元素节点
-let line = ref<any>()
-let echartDataSgs = reactive({})
-watch(() => props.echartDataSg, (data) => {
-    echartDataSgs = Object.assign({}, data)
-    getOption()
-}, { immediate: true, deep: true })
-
-
-
-function getOption() {
-    nextTick(() => {
-        const myChart = echarts.init(line.value)
-        let option = {
-            grid: {
-                top: '8%',
-                left: '5%',
-                bottom: '14%',
-                right: '5%',
-                //   containLabel: true,
-            },
-            tooltip: {
-                trigger: 'axis',
-                backgroundColor: 'rgba(0, 0, 0, .6)',
-                textStyle: {
-                    color: '#fff',
-                    fontSize: 12,
-                },
-            },
-            legend: {
-                align: 'left',
-                right: '50%',
-                top: '0%',
-                type: 'plain',
-                textStyle: {
-                    color: '#7ec7ff',
-                    fontSize: 14,
-                },
-                // icon:'rect',
-                itemGap: 25,
-                itemWidth: 18,
-                icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-                data: [
-                    {
-                        name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
-                    },
-               
-                ],
-            },
-            xAxis: [
-                {
-                    type: 'category',
-                    boundaryGap: false,
-                    axisLabel: {
-                        // formatter: '{value}',
-                        fontSize: 14,
-                        margin: 10,
-                        textStyle: {
-                            color: '#b3b8cc',
-                        },
-                        // interval: 0,
-                        formatter: function (params) {
-                            let newParamsName = ref('')  // 最终拼接成的字符串
-                            let paramsNameNumber = ref(params.length) // 实际标签的个数
-                            let provideNumber = ref(10)  // 每行能显示的字的个数
-                            let rowNumber = Math.ceil(paramsNameNumber.value / provideNumber.value) // 换行的话，需要显示几行，向上取整
-                            /**
-                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-                             */
-                            // 条件等同于rowNumber>1
-                            if (paramsNameNumber.value > provideNumber.value) {
-                                /** 循环每一行,p表示行 */
-                                for (var p = 0; p < rowNumber; p++) {
-                                    var tempStr = '' // 表示每一次截取的字符串
-                                    var start = p * provideNumber.value // 开始截取的位置
-                                    var end = start + provideNumber.value // 结束截取的位置
-                                    // 此处特殊处理最后一行的索引值
-                                    if (p == rowNumber - 1) {
-                                        // 最后一次不换行
-                                        tempStr = params.substring(start, paramsNameNumber.value)
-                                    } else {
-                                        // 每一次拼接字符串并换行
-                                        tempStr = params.substring(start, end) + '\n'
-                                    }
-                                    newParamsName.value += tempStr // 最终拼成的字符串
-                                }
-                            } else {
-                                // 将旧标签的值赋给新标签
-                                newParamsName.value = params
-                            }
-                            //将最终的字符串返回
-                            return newParamsName.value
-                        }
-
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            color: '#244a94',
-                        },
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#0d2973',
-                            type: 'dashed',
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    data: echartDataSgs.xData,
-                },
-            ],
-            yAxis: [
-                {
-                    boundaryGap: false,
-                    name: props.lengedDataName ? props.lengedDataName : '',
-                    type: 'value',
-                    max: 50,
-                    axisLabel: {
-                        textStyle: {
-                            color: '#b3b8cc',
-                        },
-                    },
-                    nameTextStyle: {
-                        color: '#fff',
-                        fontSize: 12,
-                        lineHeight: 5,
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: '#0d2973',
-                            type: 'dashed',
-                        },
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#244a94',
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                },
-            ],
-            series: [
-                {
-                    name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
-                    type: 'line',
-                    smooth: false,
-                    showSymbol: false,
-                    symbolSize: 8,
-                    zlevel: 3,
-                    itemStyle: {
-                        color: '#02f2de',
-                        borderColor: '#a3c8d8',
-                    },
-                    lineStyle: {
-                        normal: {
-                            width: 3,
-                            color: '#02f2de',
-                        },
-                    },
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(
-                                0,
-                                0,
-                                0,
-                                1,
-                                [
-                                    {
-                                        offset: 0,
-                                        color: 'rgba(2, 242, 222,0.8)',
-                                    },
-                                    {
-                                        offset: 0.5,
-                                        color: 'rgba(2, 242, 222,0.4)',
-                                    },
-                                    {
-                                        offset: 0.9,
-                                        color: 'rgba(2, 242, 222,0)',
-                                    },
-                                ],
-                                false
-                            ),
-                        },
-                    },
-                    data: echartDataSgs.yData,
-                },
-            ],
-        }
-        myChart.setOption(option)
-        window.onresize = function () {
-            myChart.resize()
-        }
-    })
-}
-
-
-</script>
-  
-<style scoped lang='less'>
-.echartLine {
-    width: 100%;
-    height: 100%;
-
-    .line {
-        width: 100%;
-        height: 100%;
-    }
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/common/echartLine2.vue

@@ -1,229 +0,0 @@
-<template>
-    <div class="echart-work">
-        <div ref="work" class="work-box"></div>
-    </div>
-</template>
-  
-<script lang="ts" setup>
-import * as echarts from 'echarts'
-import { ref, nextTick, reactive, watch, defineProps } from 'vue';
-
-let props = defineProps({
-    echartDataWd: {
-        type: Object,
-    }
-})
-
-//获取dom元素节点
-let work = ref<any>()
-let echartDataWds = reactive({})
-
-watch(() => props.echartDataWd, (data) => {
-    echartDataWds = Object.assign({}, data)
-    getOption()
-}, { immediate: true, deep: true })
-
-function getOption() {
-    nextTick(() => {
-        const myChart = echarts.init(work.value)
-        let option = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'cross',
-                },
-            },
-
-            legend: {
-                align: 'left',
-                right: '50%',
-                top: '0%',
-                type: 'plain',
-                textStyle: {
-                    color: '#7ec7ff',
-                    fontSize: 14,
-                },
-                // icon:'rect',
-                itemGap: 25,
-                itemWidth: 18,
-                icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-                data: [
-                    {
-                        name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
-                    },
-               
-                ],
-            },
-
-            grid: {
-                top: '20%',
-                left: '4%',
-                right: '4%',
-                bottom: '20%',
-                // containLabel: true
-            },
-
-            xAxis: [
-                {
-                    type: 'category',
-                    boundaryGap: false,
-                    axisLine: {
-                        //坐标轴轴线相关设置。数学上的x轴
-                        show: true,
-                        lineStyle: {
-                            color: '#244a94',
-                        },
-                    },
-                    axisLabel: {
-                        //坐标轴刻度标签的相关设置
-                        textStyle: {
-                            color: '#b3b8cc',
-                            padding: 5,
-                            fontSize: 14,
-                        },
-                        formatter: function (data) {
-                            return data
-                        },
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#0d2973',
-                            type: 'dashed',
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    data: echartDataWds.xData,
-                },
-            ],
-
-            yAxis: [
-                {
-                    name: '(℃)',
-                    nameTextStyle: {
-                        color: '#7ec7ff',
-                        fontSize: 14,
-                        padding: 0,
-                    },
-                    min: 0,
-                    max: 2000,
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#0d2973',
-                            type: 'dashed',
-                        },
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#244a94',
-                        },
-                    },
-                    axisLabel: {
-                        show: true,
-                        textStyle: {
-                            color: '#b3b8cc',
-                            padding: 5,
-                        },
-                        formatter: function (value) {
-                            if (value === 0) {
-                                return value
-                            }
-                            return value
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                },
-            ],
-            series: [
-                {
-                    name: echartDataWds.maxData ? echartDataWds.maxData.lengedData : '',
-                    type: 'line',
-                    smooth: true,
-                    yAxisIndex: 0,
-                    symbolSize: 8,
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                            color: '#4653fd', // 线条颜色
-                        },
-                        borderColor: 'rgba(0,0,0,.4)',
-                    },
-                    itemStyle: {
-                        color: '#4653fd',
-                        borderColor: '#646ace',
-                        borderWidth: 0,
-                    },
-                    data: echartDataWds.maxData ? echartDataWds.maxData.data : [],
-                },
-                {
-                    name: echartDataWds.minData ? echartDataWds.minData.lengedData : '',
-                    type: 'line',
-                    smooth: true,
-                    yAxisIndex: 0,
-                    symbolSize: 8,
-
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                            color: '#46fda8', // 线条颜色
-                        },
-                        borderColor: 'rgba(0,0,0,.4)',
-                    },
-                    itemStyle: {
-                        color: '#46fda8',
-                        borderColor: '#646ace',
-                        borderWidth: 0,
-                    },
-                    data: echartDataWds.minData ? echartDataWds.minData.data : [],
-                },
-                {
-                    name: echartDataWds.aveaData ? echartDataWds.aveaData.lengedData : '',
-                    type: 'line',
-                    smooth: true,
-                    yAxisIndex: 0,
-                    symbolSize: 8,
-
-                    lineStyle: {
-                        normal: {
-                            width: 2,
-                            color: '#1eb0fc', // 线条颜色
-                        },
-                        borderColor: 'rgba(0,0,0,.4)',
-                    },
-                    itemStyle: {
-                        color: '#1eb0fc',
-                        borderColor: '#646ace',
-                        borderWidth: 0,
-                    },
-                    data: echartDataWds.aveaData ? echartDataWds.aveaData.data : [],
-                },
-            ],
-        }
-        myChart.setOption(option)
-        window.onresize = function () {
-            myChart.resize()
-        }
-    })
-}
-
-
-</script>
-  
-<style scoped lang="less">
-.echart-work {
-    width: 100%;
-    height: 100%;
-
-    .work-box {
-        width: 100%;
-        height: 100%;
-    }
-}
-</style>
-  

src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

@@ -1,480 +0,0 @@
-<template>
-  <div class="fireWork">
-    <!-- 顶部区域 -->
-    <div class="work-nav">
-      <div class="nav" v-for="(item, index) in topList" :key="index">
-        <div class="pic" v-if="item.imgSrc">
-          <img :src="imgUrl" alt="" />
-        </div>
-        <div class="content" v-if="item.label && item.value">
-          <span>{{ item.label }}</span>
-          <span>{{ item.value }}</span>
-        </div>
-        <div class="text" v-if="item.text">{{ item.text }}</div>
-        <div class="percent" v-if="item.list.length != 0">
-          <div class="title">{{ item.label }}</div>
-          <div class="value">
-            <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
-              <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
-              <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 中间区域 -->
-    <div class="center-echart">
-      <div class="nav-title">
-        <div class="title">光纤测温系统温度实时监测</div>
-      </div>
-      <div class="echart-box">
-        <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw" />
-      </div>
-    </div>
-    <!-- 底部区域 -->
-    <div class="bot-content">
-      <div class="title">
-        <div class="text">束管系统监测</div>
-      </div>
-      <div class="content">
-        <div class="content-box" v-for="(item, index) in contentList" :key="index">
-          <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
-            <div class="content-title">
-              <span> {{ items.title }}</span>
-              <span> {{ items.dw }}</span>
-            </div>
-            <div class="content-item">
-              <span>{{ items.label }}</span>
-              <span class="bolds">{{ items.value }}</span>
-            </div>
-            <div class="content-item">
-              <span>{{ items.label1 }}</span>
-              <span class="bolds">{{ items.time }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="echart-box">
-        <echartLine1 :echartDataSg="echartDataSg" :lengedDataName="echartDataSg.lengedDataName" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-  import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-  import imgUrl from '../../../../../assets/images/fire/pie.png';
-  import echartLine from './echartLine.vue';
-  import echartLine1 from './echartLine1.vue';
-  import { topList, contentList } from '../common.data';
-
-  let props = defineProps({
-    listData: Object,
-  });
-
-  let maxY = ref(2000);
-  let echartDw = ref('(­°C)');
-  //光钎测温-图表数据
-  let echartDataGq = reactive({
-    maxData: {
-      lengedData: '当前温度',
-      data: [],
-    },
-    xData: [],
-  });
-  //束管监测-图表数据
-  let echartDataSg = reactive({
-    xData: [],
-    yData: [],
-    lengedData: 'O₂',
-    lengedDataName: '(%)',
-  });
-  let echartDataSgList = reactive<any[]>([]);
-  //束管实时数据选项点击
-  function getSgClick(items) {
-    echartDataSg.xData.length = 0;
-    echartDataSg.yData.length = 0;
-    echartDataSg.lengedData = items.title;
-    echartDataSg.lengedDataName = items.dw;
-
-    switch (items.title) {
-      case 'O₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.o2val);
-        });
-        break;
-      case 'C₂H₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.ch2val);
-        });
-        break;
-      case 'CO':
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.coval);
-        });
-        break;
-      case 'CH₄':
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.chval);
-        });
-        break;
-      case 'CO₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.co2val);
-        });
-        break;
-      case 'C₂H₂':
-        echartDataSgList.forEach((el) => {
-          echartDataSg.xData.push(el.time);
-          echartDataSg.yData.push(el.gasval);
-        });
-        break;
-    }
-  }
-
-  watch(
-    () => props.listData,
-    (val, val1) => {
-      echartDataGq.xData.length = 0;
-      echartDataGq.maxData.data.length = 0;
-      echartDataSgList.length = 0;
-      echartDataSg.xData.length = 0;
-      echartDataSg.yData.length = 0;
-      if (JSON.stringify(val) != '{}') {
-        if (val.fiber.length != 0) {
-          topList[0].value = val.fiber[0].readData.fmax;
-          topList[1].value = val.fiber[0].readData.fmin;
-          topList[2].value = val.fiber[0].readData.favg;
-          topList[3].text = val.fiber[0].warnFlag ? '报警' : '正常';
-          JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
-            echartDataGq.xData.push(el.pos);
-            echartDataGq.maxData.data.push(el.value);
-          });
-        } else {
-          topList[0].value = '--';
-          topList[1].value = '--';
-          topList[2].value = '--';
-          topList[3].text = '正常';
-        }
-
-        if (val.bundletube.length != 0) {
-          contentList[0].list[0].value = val.bundletube[0].readData.o2val;
-          contentList[0].list[1].value = val.bundletube[0].readData.ch2val;
-          contentList[1].list[0].value = val.bundletube[0].readData.coval;
-          contentList[1].list[1].value = val.bundletube[0].readData.chval;
-          contentList[2].list[0].value = val.bundletube[0].readData.co2val;
-          contentList[2].list[1].value = val.bundletube[0].readData.gasval;
-          contentList.forEach((el) => {
-            el.list.forEach((v) => {
-              v.time = val.bundletube[0].readTime.substring(0, val.bundletube[0].readTime.lastIndexOf(':'));
-            });
-          });
-
-          val.bundletube[0].history.forEach((el) => {
-            echartDataSg.xData.push(el.time);
-            if (echartDataSg.lengedData == 'O₂') {
-              echartDataSg.yData.push(el.o2val);
-            } else if (echartDataSg.lengedData == 'C₂H₄') {
-              echartDataSg.yData.push(el.ch2val);
-            } else if (echartDataSg.lengedData == 'C₂H₂') {
-              echartDataSg.yData.push(el.gasval);
-            } else if (echartDataSg.lengedData == 'CH₄') {
-              echartDataSg.yData.push(el.chval);
-            } else if (echartDataSg.lengedData == 'CO') {
-              echartDataSg.yData.push(el.coval);
-            } else if (echartDataSg.lengedData == 'CO₂') {
-              echartDataSg.yData.push(el.co2val);
-            }
-            echartDataSgList.push(el);
-          });
-        } else {
-          contentList[0].list[0].value = '--';
-          contentList[0].list[1].value = '--';
-          contentList[1].list[0].value = '--';
-          contentList[1].list[1].value = '--';
-          contentList[2].list[0].value = '--';
-          contentList[2].list[1].value = '--';
-          contentList.forEach((el) => {
-            el.list.forEach((v) => {
-              v.time = '--';
-            });
-          });
-        }
-      }
-    },
-    { deep: true }
-  );
-</script>
-
-<style lang="less" scoped>
-  .fireWork {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-
-    .work-nav {
-      height: 15%;
-      width: 100%;
-      margin-bottom: 20px;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .nav {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &:nth-child(1) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(2) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(3) {
-          flex: 1;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(4) {
-          flex: 0.6;
-          color: #b3b8cc;
-          font-size: 16px;
-          height: 100%;
-          border-right: 2px solid;
-          border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-        }
-
-        &:nth-child(5) {
-          flex: 1.4;
-          height: 100%;
-
-          .percent {
-            width: 100%;
-            height: 82%;
-            padding: 0px 20px;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .title {
-              font-size: 14px;
-              padding: 5px 0px;
-              color: #b3b8cc;
-              text-align: center;
-            }
-
-            .value {
-              display: flex;
-              justify-content: space-between;
-
-              span {
-                font-family: 'douyuFont';
-                font-size: 18px;
-              }
-            }
-          }
-        }
-
-        .pic {
-          width: 30%;
-          height: 82%;
-
-          img {
-            width: 100%;
-            height: 100%;
-          }
-        }
-
-        .content {
-          height: 82%;
-          margin-left: 15px;
-          color: #fff;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-
-          span {
-            font-size: 14px;
-
-            &:nth-child(1) {
-              padding: 5px 0px;
-              color: #b3b8cc;
-            }
-
-            &:nth-child(2) {
-              font-family: 'douyuFont';
-              font-size: 16px;
-              color: #3df6ff;
-            }
-          }
-        }
-      }
-
-      .nav:nth-child(1) .pic {
-        background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-        background-size: 50% 50%;
-      }
-
-      .nav:nth-child(2) .pic {
-        background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-        background-size: 50% 50%;
-      }
-
-      .nav:nth-child(3) .pic {
-        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-        background-size: 50% 50%;
-      }
-    }
-
-    .center-echart {
-      width: 100%;
-      height: 32%;
-      padding: 10px;
-      margin-bottom: 20px;
-      box-sizing: border-box;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      .nav-title {
-        height: 30px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title {
-          font-family: 'douyuFont';
-          font-size: 14px;
-          color: #fff;
-          // color: #3df6ff;
-        }
-      }
-
-      .echart-box {
-        width: 100%;
-        height: calc(100% - 30px);
-      }
-    }
-
-    .bot-content {
-      position: relative;
-      width: 100%;
-      height: calc(53% - 40px);
-      padding: 10px 10px 0px 10px;
-      box-sizing: border-box;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      .title {
-        height: 30px;
-        display: flex;
-        justify-content: space-between;
-
-        .text {
-          height: 30px;
-          line-height: 30px;
-          font-family: 'douyuFont';
-          font-size: 14px;
-          color: #fff;
-        }
-      }
-
-      .content {
-        height: calc(100% - 30px);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .content-box {
-          width: 100%;
-          height: 29%;
-          display: flex;
-          justify-content: space-between;
-          margin-top: 0px !important;
-
-          .box-item {
-            position: relative;
-            width: 16%;
-            height: 100%;
-            background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
-            background-size: 100% 100%;
-            cursor: pointer;
-
-            .content-title {
-              position: absolute;
-              left: 50%;
-              top: 0;
-              transform: translate(-50%);
-              color: #fff;
-              font-size: 14px;
-            }
-
-            .content-item {
-              position: absolute;
-              width: 93%;
-              height: 27%;
-              display: flex;
-              align-items: center;
-              padding: 0px 10px;
-              box-sizing: border-box;
-              background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-              background-size: 100% 100%;
-              color: #fff;
-              font-size: 14px;
-
-              &:nth-child(2) {
-                left: 50%;
-                top: 28%;
-                transform: translate(-50%);
-                display: flex;
-                justify-content: space-between;
-              }
-
-              &:nth-child(3) {
-                left: 50%;
-                top: 62%;
-                transform: translate(-50%);
-                display: flex;
-                justify-content: space-between;
-              }
-
-              .bolds {
-                font-family: 'douyuFont';
-                color: #3df6ff;
-                font-size: 12px;
-              }
-            }
-          }
-        }
-      }
-
-      .echart-box {
-        position: absolute;
-        left: 50%;
-        top: 50px;
-        transform: translate(-50%, 0);
-        width: 66%;
-        height: calc(100% - 50px);
-      }
-    }
-  }
-</style>

src/views/vent/monitorManager/alarmMonitor/common/mainWell.vue

@@ -1,1060 +0,0 @@
-<template>
-  <div class="mainWell">
-    <!-- 光钎测温 -->
-    <div class="work-nav" v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
-      <div class="nav" v-for="(item, index) in topOutList" :key="index">
-        <div class="pic" v-if="item.imgSrc">
-          <img :src="imgUrl" alt="" />
-        </div>
-        <div class="content" v-if="item.label && item.value">
-          <span>{{ item.label }}</span>
-          <span>{{ item.value }}</span>
-        </div>
-        <div class="text" v-if="item.text">{{ item.text }}</div>
-      </div>
-    </div>
-    <!-- 束管监测 -->
-    <div class="work-nav" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
-      <div class="content-box">
-        <div class="contents">
-          <img src="../../../../../assets/images/fire/pie.png" alt="" />
-          <span class="text">{{ topContent.temperature }}</span>
-          <span class="dw">°C</span>
-        </div>
-        <!-- <div class="contents">
-          <div class="text">
-            <span class="text-label">位置 : </span>
-            <span class="text-value">{{ topContent.position }}</span>
-          </div>
-          <div class="text">
-            <span class="text-label">时间 : </span>
-            <span class="text-value">{{ topContent.time }}</span>
-          </div>
-        </div> -->
-      </div>
-      <div class="content-box">
-        <div class="text1">{{ topContent.warn }}</div>
-      </div>
-    </div>
-
-    <div class="center-box" v-if="strType != 'sys_coalseam'">
-      <div class="content-box" v-for="(items, index) in tabList" :key="index">
-        <div class="title">
-          <span class="title-label">{{ items.label }}</span>
-          <span class="details">{{ `${items.details}>>` }}</span>
-        </div>
-        <div class="content">
-          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ x: 0, y: 273 }" :columns="columnsSmoke"
-            :data-source="monitorlistYw" :pagination="false">
-            <span slot="action" slot-scope="text, record"></span>
-          </a-table>
-          <a-table v-if="index == 1" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
-            :pagination="false" :scroll="{ y: 273 }">
-            <span slot="action" slot-scope="text, record"> </span>
-          </a-table>
-          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: 273 }" :columns="columns"
-            :data-source="monitorlistPl" :pagination="false">
-            <span slot="action" slot-scope="text, record"> </span>
-          </a-table>
-        </div>
-      </div>
-    </div>
-    <div :class="listData.fiber.length != 0 ? 'center-box1' : 'center-box2'" v-if="strType == 'sys_coalseam'">
-      <div v-for="(items, index) in tabLists" :class="index != 2 && index != 3 ? 'content-box' : 'content-boxs'"
-        :key="index">
-        <div class="title">
-          <span class="title-label">{{ items.label }}</span>
-          <span class="details">{{ `${items.details}>>` }}</span>
-        </div>
-        <div class="content">
-          <a-table v-if="index == 0" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
-            :columns="columnsSmoke" :data-source="monitorlistYw" :pagination="false">
-            <span slot="action" slot-scope="text, record"></span>
-          </a-table>
-
-          <a-table v-if="index == 1" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 290 : 450 }"
-            :columns="columnsSmoke" :data-source="monitorlistWd" :pagination="false">
-            <span slot="action" slot-scope="text, record"> </span>
-          </a-table>
-          <a-table v-if="index == 2" ref="table" size="small" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }"
-            :columns="columns" :data-source="monitorlistPl" :pagination="false">
-            <span slot="action" slot-scope="text, record"> </span>
-          </a-table>
-          <a-table v-if="index == 3" ref="table1" size="small" :columns="columns" :data-source="monitorlistHy"
-            :pagination="false" :scroll="{ y: listData.fiber.length != 0 ? 60 : 120 }">
-            <span slot="action" slot-scope="text, record"> </span>
-          </a-table>
-        </div>
-      </div>
-    </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-      v-if="listData.bundletube.length == 0 && strType != 'sys_coalseam'">
-      <div class="footer-title">
-        <div class="echart-label">光钎测温系统实时温度监测</div>
-      </div>
-      <div class="echart-content">
-        <echartLine2 :echartDataWd="echartDataWd" />
-      </div>
-    </div>
-    <div :class="strType == 'sys_coalseam' ? 'footer-box1' : 'footer-box'"
-      v-if="strType == 'sys_coalseam' && listData.fiber.length != 0">
-      <div class="footer-title">
-        <div class="echart-label">光钎测温系统实时温度监测</div>
-      </div>
-      <div class="echart-content">
-        <echartLine2 :echartDataWd="echartDataWd" />
-      </div>
-    </div>
-
-    <!-- 束管监测 -->
-    <div class="content-s" v-if="listData.bundletube.length != 0 && strType != 'sys_coalseam'">
-      <div class="title-b">采空区密闭参数</div>
-      <div class="card-btn">
-        <div :class="activeIndex == index ? 'content-box1' : 'content-box'" v-for="(item, index) in mbList" :key="index"
-          @click="btnClick(item, index)">
-          <div class="btn-label">
-            <span>{{ item.label }}</span>
-            <span>{{ item.dw }}</span>
-          </div>
-          <div class="box-item box-item1">
-            <span class="text-t">{{ `${item.label1}:` }}</span>
-            <span class="text-v">{{ item.nd }}</span>
-          </div>
-          <div class="box-item box-item2">
-            <span class="text-t">{{ `${item.label2}:` }}</span>
-            <span class="text-v">{{ item.time1 }}</span>
-          </div>
-          <div class="box-item box-item3">
-            <span class="text-t">{{ `${item.label3}:` }}</span>
-            <span class="text-v">{{ item.address }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="echart-box">
-        <div class="title-f">
-          <div class="title-text">{{ `${type}趋势` }}</div>
-        </div>
-        <div class="echarts-box">
-          <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, reactive, watch, defineProps } from 'vue';
-import { topOutList, tabList, tabLists, columns, columnsSmoke } from '../common.data';
-import imgUrl from '../../../../../assets/images/fire/pie.png';
-import echartLine2 from './echartLine2.vue';
-import echartLine1 from './echartLine1.vue';
-
-let props = defineProps({
-  listData: Object,
-  strType: String,
-});
-
-//束管监测-顶部区域数据
-let topContent = reactive({
-  temperature: '0',
-  position: '',
-  time: '',
-  warn: '',
-});
-//束管监测当前密闭参数激活选项
-let activeIndex = ref(0);
-//束管监测当前激活密闭参数类型
-let type = ref('O₂');
-//束管监测密闭参数列表
-let mbList = reactive([
-  {
-    label: 'O₂',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO₂',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CH₄',
-    dw: '(%)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C₂H₂',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C₂H₄',
-    dw: '(ppm)',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-]);
-let echartDataSg1 = reactive({
-  xData: [],
-  yData: [],
-  lengedData: 'O₂',
-  lengedDataName: '(%)',
-});
-let echartDataSgList = reactive<any[]>([]);
-
-//外因火灾温度监测-图表数据
-let echartDataWd = reactive({
-  xData: [],
-  maxData: {
-    data: [],
-    lengedData: '实时温度',
-  },
-});
-
-//烟雾传感器列表数据
-let monitorlistYw = reactive([]);
-
-//火焰传感器列表数据
-let monitorlistHy = reactive([]);
-
-//喷淋装置列表数据
-let monitorlistPl = reactive([]);
-
-//温度传感器列表数据
-let monitorlistWd = reactive([]);
-
-//束管监测密闭参数选项切换
-function btnClick(item, ind) {
-  activeIndex.value = ind;
-  type.value = item.label;
-  echartDataSg1.xData.length = 0;
-  echartDataSg1.yData.length = 0;
-  echartDataSg1.lengedData = type.value;
-  echartDataSg1.lengedDataName = item.dw;
-
-  switch (type.value) {
-    case 'O₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.o2val);
-      });
-      break;
-    case 'C₂H₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.ch2val);
-      });
-      break;
-    case 'CO':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.coval);
-      });
-      break;
-    case 'CH₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.chval);
-      });
-      break;
-    case 'CO₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.co2val);
-      });
-      break;
-    case 'C₂H₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg1.xData.push(el.time);
-        echartDataSg1.yData.push(el.gasval);
-      });
-      break;
-  }
-}
-
-watch(
-  () => props.listData,
-  (val) => {
-    console.log(val, 'val---------------');
-    props.listData = val;
-    if (JSON.stringify(val) != '{}') {
-      echartDataSg1.xData.length = 0;
-      echartDataSg1.yData.length = 0;
-      echartDataSgList.length = 0;
-      echartDataWd.xData.length = 0;
-      echartDataWd.maxData.data.length = 0;
-      monitorlistYw.length = 0;
-      monitorlistHy.length = 0;
-      monitorlistPl.length = 0;
-      monitorlistWd.length = 0;
-      if (val.fiber.length != 0) {
-        topOutList[0].value = val.fiber[0].readData.fmax;
-        topOutList[1].value = val.fiber[0].readData.fmin;
-        topOutList[2].value = val.fiber[0].readData.favg;
-        topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常';
-        JSON.parse(val.fiber[0].readData.fibreTemperature).forEach((el) => {
-          echartDataWd.xData.push(el.pos);
-          echartDataWd.maxData.data.push(el.value);
-        });
-      } else {
-        topOutList[0].value = '--';
-        topOutList[1].value = '--';
-        topOutList[2].value = '--';
-        topOutList[3].text = '正常';
-      }
-
-      if (val.bundletube.length != 0) {
-        topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--';
-        topContent.position = val.bundletube[0].strinstallpos || '--';
-        topContent.time = val.bundletube[0].readTime || '--';
-        topContent.warn =
-          val.bundletube[0].warnLevel == 0
-            ? '正常'
-            : val.bundletube[0].warnLevel == 101
-              ? '较低风险'
-              : val.bundletube[0].warnLevel == 102
-                ? '低风险'
-                : val.bundletube[0].warnLevel == 103
-                  ? '中风险'
-                  : val.bundletube[0].warnLevel == 104
-                    ? '高风险'
-                    : val.bundletube[0].warnLevel == 201
-                      ? '报警'
-                      : '正常';
-        val.bundletube[0].history.forEach((v) => {
-          echartDataSg1.xData.push(v.time);
-          if (echartDataSg1.lengedData == 'O₂') {
-            echartDataSg1.yData.push(v.o2val);
-          } else if (echartDataSg1.lengedData == 'C₂H₄') {
-            echartDataSg1.yData.push(v.ch2val);
-          } else if (echartDataSg1.lengedData == 'CO') {
-            echartDataSg1.yData.push(v.coval);
-          } else if (echartDataSg1.lengedData == 'CH₄') {
-            echartDataSg1.yData.push(v.chval);
-          } else if (echartDataSg1.lengedData == 'CO₂') {
-            echartDataSg1.yData.push(v.co2val);
-          } else if (echartDataSg1.lengedData == 'C₂H₂') {
-            echartDataSg1.yData.push(v.gasval);
-          }
-          echartDataSgList.push(v);
-        });
-      } else {
-        topContent.temperature = '--';
-        topContent.position = '--';
-        topContent.time = '--';
-        topContent.warn = '正常';
-      }
-
-      if (val.smoke.length != 0) {
-        val.smoke.forEach((el) => {
-          monitorlistYw.push({ strinstallpos: el.strinstallpos, val: el.readData.smokeval, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
-        });
-      }
-
-      if (val.co.length != 0) {
-        val.co.forEach((el) => {
-          monitorlistHy.push(el);
-        });
-      }
-
-      if (val.spray.length != 0) {
-        val.spray.forEach((el) => {
-          monitorlistPl.push(el);
-        });
-      }
-
-      if (val.temperature.length != 0) {
-        val.temperature.forEach((el) => {
-          monitorlistWd.push({ strinstallpos: el.strinstallpos, val: el.readData.fireval, warnLevel_str: el.warnLevel_str == '正常' ? '低风险' : el.warnLevel_str, readTime: el.readTime });
-        });
-      }
-    }
-  },
-  { immediate: true, deep: true }
-);
-</script>
-
-<style lang="less" scoped>
-.mainWell {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  box-sizing: border-box;
-  overflow-y: auto;
-
-  .work-nav {
-    height: 15%;
-    width: 100%;
-    margin-bottom: 20px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .nav {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &:nth-child(1) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-      }
-
-      &:nth-child(2) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-      }
-
-      &:nth-child(3) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-      }
-
-      &:nth-child(4) {
-        flex: 1.2;
-        color: #b3b8cc;
-        font-size: 16px;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-      }
-
-      &:nth-child(5) {
-        flex: 0.8;
-        color: #2b87ff;
-        font-size: 14px;
-        height: 100%;
-      }
-
-      .pic {
-        width: 26%;
-        height: 84%;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .content {
-        height: 84%;
-        margin-left: 15px;
-        color: #fff;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-
-        span {
-          font-size: 14px;
-
-          &:nth-child(1) {
-            padding: 5px 0px;
-            color: #b3b8cc;
-          }
-
-          &:nth-child(2) {
-            font-family: 'douyuFont';
-            font-size: 16px;
-            color: #3df6ff;
-          }
-        }
-      }
-    }
-
-    .nav:nth-child(1) .pic {
-      background: url('../../../../../assets/images/fire/max.svg') no-repeat center;
-      background-size: 50% 50%;
-    }
-
-    .nav:nth-child(2) .pic {
-      background: url('../../../../../assets/images/fire/min.svg') no-repeat center;
-      background-size: 50% 50%;
-    }
-
-    .nav:nth-child(3) .pic {
-      background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-      background-size: 50% 50%;
-    }
-
-    .content-box {
-      display: flex;
-
-      &:nth-child(1) {
-        justify-content: space-around;
-        align-items: center;
-        flex: 2;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-      }
-
-      &:nth-child(2) {
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-      }
-
-      .contents {
-        height: 73%;
-
-        &:nth-child(1) {
-          width: 40%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-
-          img {
-            position: relative;
-            width: 23%;
-            height: 100%;
-            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
-            background-size: 50% 50%;
-          }
-
-          .text {
-            font-family: 'douyuFont';
-            font-size: 28px;
-            margin: 0px 15px;
-            color: #3df6ff;
-          }
-
-          .dw {
-            font-size: 14px;
-            color: #b3b8cc;
-          }
-        }
-
-        &:nth-child(2) {
-          width: 60%;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-
-          .text {
-            font-size: 18px;
-
-            .text-label {
-              color: #b3b8cc;
-              font-weight: bold;
-            }
-
-            .text-value {
-              font-family: 'douyuFont';
-              color: #3df6ff;
-              margin-left: 10px;
-            }
-          }
-        }
-      }
-
-      .text1 {
-        font-size: 16px;
-        color: #b3b8cc;
-        font-weight: bold;
-      }
-    }
-  }
-
-  .center-box {
-    height: 47%;
-    margin-bottom: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .content-box {
-      display: flex;
-      flex-direction: column;
-      width: 32%;
-      height: 100%;
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      &:nth-child(2) {
-        margin: 0px 20px;
-      }
-
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title-label {
-          // font-family: 'douyuFont';
-          font-size: 14px;
-          color: #fff;
-        }
-
-        .details {
-          font-size: 14px;
-          color: #1f81df;
-        }
-      }
-
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
-  }
-
-  .center-box1 {
-    height: 70%;
-    // margin-bottom: 20px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: wrap;
-
-    .content-box {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(70% - 10px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
-      }
-
-      &:nth-child(3) {
-        margin: 0px 20px 0px 0px;
-      }
-
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title-label {
-          font-size: 16px;
-          color: #fff;
-        }
-
-        .details {
-          font-size: 14px;
-          color: #1f81df;
-        }
-      }
-
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
-
-    .content-boxs {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(30% - 30px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
-      }
-
-      &:nth-child(3) {
-        margin: 0px 20px 20px 0px;
-      }
-
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title-label {
-          font-size: 16px;
-          color: #fff;
-        }
-
-        .details {
-          font-size: 14px;
-          color: #1f81df;
-        }
-      }
-
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
-  }
-
-  .center-box2 {
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: wrap;
-
-    .content-box {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(70% - 10px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
-      }
-
-      &:nth-child(3) {
-        margin: 0px 20px 0px 0px;
-      }
-
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title-label {
-          font-size: 16px;
-          color: #fff;
-        }
-
-        .details {
-          font-size: 14px;
-          color: #1f81df;
-        }
-      }
-
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
-
-    .content-boxs {
-      display: flex;
-      flex-direction: column;
-      width: calc(50% - 10px);
-      height: calc(30% - 30px);
-      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-      background-size: 100% 100%;
-
-      &:nth-child(1) {
-        margin: 0px 20px 20px 0px;
-      }
-
-      &:nth-child(3) {
-        margin: 0px 20px 20px 0px;
-      }
-
-
-      .title {
-        width: 100%;
-        height: 40px;
-        padding: 0px 15px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #0c3c88;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title-label {
-          font-size: 16px;
-          color: #fff;
-        }
-
-        .details {
-          font-size: 14px;
-          color: #1f81df;
-        }
-      }
-
-      .content {
-        height: calc(100% - 40px);
-        margin-bottom: 10px;
-      }
-    }
-  }
-
-  .footer-box {
-    height: calc(38% - 40px);
-    padding: 10px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-
-    .footer-title {
-      height: 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .echart-label {
-        font-family: 'douyuFont';
-        font-size: 14px;
-        color: #fff;
-      }
-    }
-
-    .echart-content {
-      height: calc(100% - 30px);
-    }
-  }
-
-  .footer-box1 {
-    height: calc(30% - 20px);
-    padding: 10px 15px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-
-    .footer-title {
-      height: 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .echart-label {
-        font-family: 'douyuFont';
-        font-size: 16px;
-        color: #fff;
-      }
-    }
-
-    .echart-content {
-      height: calc(100% - 30px);
-    }
-  }
-
-  .content-s {
-    width: 100%;
-    height: 608px;
-    padding: 10px;
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-    background-size: 100% 100%;
-    box-sizing: border-box;
-
-    .title-b {
-      height: 30px;
-      line-height: 30px;
-      font-family: 'douyuFont';
-      font-size: 14px;
-      color: #fff;
-    }
-
-    .card-btn {
-      height: 28%;
-      margin-bottom: 10px;
-      display: flex;
-      justify-content: space-between;
-
-      .content-box {
-        position: relative;
-        width: 16%;
-        height: 100%;
-        background: url('../../../../../assets/images/fire/1.png') no-repeat center;
-        background-size: 100% 100%;
-        cursor: pointer;
-
-        .btn-label {
-          position: absolute;
-          left: 50%;
-          top: 0;
-          transform: translate(-50%);
-          font-size: 16px;
-          color: #fff;
-        }
-
-        .box-item {
-          position: absolute;
-          left: 50%;
-          transform: translate(-50%, 0);
-          width: 89%;
-          height: 16%;
-          padding: 0px 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-          background-size: 100% 100%;
-
-          .text-t {
-            width: 17%;
-            color: #fff;
-            font-size: 12px;
-          }
-
-          .text-v {
-            width: 83%;
-            font-family: 'douyuFont';
-            font-size: 10px;
-            color: #3df6ff;
-            display: flex;
-            justify-content: flex-end;
-          }
-        }
-
-        .box-item1 {
-          top: 24%;
-        }
-
-        .box-item2 {
-          top: 50%;
-        }
-
-        .box-item3 {
-          top: 75%;
-        }
-      }
-
-      .content-box1 {
-        position: relative;
-        width: 16%;
-        height: 100%;
-        background: url('../../../../../assets/images/fire/2.png') no-repeat center;
-        background-size: 100% 100%;
-        cursor: pointer;
-
-        .btn-label {
-          position: absolute;
-          left: 50%;
-          top: 0;
-          transform: translate(-50%);
-          font-size: 16px;
-          color: #fff;
-        }
-
-        .box-item {
-          position: absolute;
-          left: 50%;
-          transform: translate(-50%, 0);
-          width: 89%;
-          height: 16%;
-          padding: 0px 10px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
-          background-size: 100% 100%;
-
-          .text-t {
-            width: 17%;
-            color: #fff;
-            font-size: 12px;
-          }
-
-          .text-v {
-            width: 83%;
-            font-family: 'douyuFont';
-            font-size: 10px;
-            color: #3df6ff;
-            display: flex;
-            justify-content: flex-end;
-          }
-        }
-
-        .box-item1 {
-          top: 19%;
-        }
-
-        .box-item2 {
-          top: 41%;
-        }
-
-        .box-item3 {
-          top: 63%;
-        }
-      }
-    }
-
-    .echart-box {
-      height: calc(72% - 41px);
-      border: 1px solid #114aac;
-
-      .title-f {
-        height: 40px;
-        padding: 0px 10px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .title-text {
-          font-family: 'douyuFont';
-          font-size: 14px;
-          color: #fff;
-        }
-      }
-
-      .echarts-box {
-        height: calc(100% - 40px);
-      }
-    }
-  }
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/common/warnTargetFire.vue

@@ -1,473 +0,0 @@
-<template>
-    <div class="warnTargetFire">
-        <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 720 }">
-            <template #bodyCell="{ column, text }">
-                <template v-if="column.dataIndex === 'name'">
-                    <a href="javascript:;">{{ text }}</a>
-                </template>
-            </template>
-        </a-table>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-let tableData = ref<any[]>([
-    {
-        key: '1',
-        one: '回风测氧化带CO浓度',
-        two: '一级预警',
-        three: 'CO>60ppm',
-    },
-    {
-        key: '2',
-        one: '回风测氧化带CO浓度',
-        two: '二级预警',
-        three: '240ppm>CO>60ppm',
-
-    },
-    {
-        key: '3',
-        one: '回风测氧化带CO浓度',
-        two: '三级预警',
-        three: 'CO>240ppm',
-    },
-    {
-        key: '4',
-        one: '回风测氧化带CO浓度',
-        two: '四级预警',
-        three: 'CO>1000ppm',
-    },
-    {
-        key: '5',
-        one: '回风测氧化带氧温度',
-        two: '一级预警',
-        three: '温度>40℃',
-    },
-    {
-        key: '6',
-        one: '回风测氧化带氧温度',
-        two: '二级预警',
-        three: '70℃<温度<40℃',
-    },
-    {
-        key: '7',
-        one: '回风测氧化带氧温度',
-        two: '三级预警',
-        three: '70℃<温度<210℃',
-    },
-    {
-        key: '8',
-        one: '回风测氧化带氧温度',
-        two: '四级预警',
-        three: '温度>210℃',
-    },
-    {
-        key: '9',
-        one: '回风隅角CO浓度',
-        two: '一级预警',
-        three: 'CO>24ppm',
-    },
-    {
-        key: '10',
-        one: '回风隅角CO浓度',
-        two: '二级预警',
-        three: 'CO>100ppm',
-    },
-    {
-        key: '11',
-        one: '回风隅角CO浓度',
-        two: '三级预警',
-        three: 'CO>160ppm',
-    },
-    {
-        key: '12',
-        one: '回风隅角CO浓度',
-        two: '四级预警',
-        three: 'CO>200ppm',
-    },
-    {
-        key: '13',
-        one: '回风隅角气体温度',
-        two: '一级预警',
-        three: '温度>33℃',
-    },
-    {
-        key: '14',
-        one: '回风隅角气体温度',
-        two: '二级预警',
-        three: '温度>40℃',
-    },
-    {
-        key: '15',
-        one: '回风隅角气体温度',
-        two: '三级预警',
-        three: '温度>50℃',
-    },
-    {
-        key: '16',
-        one: '回风隅角气体温度',
-        two: '四级预警',
-        three: '温度>60℃',
-    },
-    {
-        key: '17',
-        one: '回风流CO浓度',
-        two: '一级预警',
-        three: 'CO>12ppm',
-    },
-    {
-        key: '18',
-        one: '回风流CO浓度',
-        two: '二级预警',
-        three: 'CO>24ppm',
-    },
-    {
-        key: '19',
-        one: '回风流CO浓度',
-        two: '三级预警',
-        three: 'CO>40ppm',
-    },
-    {
-        key: '20',
-        one: '回风流CO浓度',
-        two: '四级预警',
-        three: 'CO>70ppm',
-    },
-    {
-        key: '21',
-        one: '回风流巷道气体温度',
-        two: '一级预警',
-        three: '温度>30℃',
-    },
-    {
-        key: '22',
-        one: '回风流巷道气体温度',
-        two: '二级预警',
-        three: '温度>35℃',
-    },
-    {
-        key: '23',
-        one: '回风流巷道气体温度',
-        two: '三级预警',
-        three: '温度>45℃',
-    },
-    {
-        key: '24',
-        one: '回风流巷道气体温度',
-        two: '四级预警',
-        three: '温度>70℃',
-    },
-    {
-        key: '25',
-        one: '回风测氧化带C2H4浓度',
-        two: '三级预警',
-        three: 'C2H4>0pmm',
-    },
-    {
-        key: '26',
-        one: '回风测氧化带C2H2浓度',
-        two: '四级预警',
-        three: 'C2H2>0pmm',
-    },
-    {
-        key: '27',
-        one: '回风测氧化带100*CO/O2',
-        two: '一级预警',
-        three: '0.2~0.5',
-    },
-    {
-        key: '28',
-        one: '回风测氧化带100*CO/O2',
-        two: '二级预警',
-        three: '>0.5',
-    },
-    {
-        key: '29',
-        one: '回风测氧化带100*CO/O2',
-        two: '三级预警',
-        three: '无限大，出现C2H4',
-    },
-    {
-        key: '30',
-        one: '回风测氧化带100*CO/O2',
-        two: '四级预警',
-        three: '无限大，出现C2H2',
-    },
-    {
-        key: '31',
-        one: '回风测氧化带O2浓度',
-        two: '一级预警',
-        three: '7%>CO>5%',
-    },
-    {
-        key: '32',
-        one: '回风测氧化带O2浓度',
-        two: '二级预警',
-        three: '10%>CO>7%',
-    },
-    {
-        key: '33',
-        one: '回风测氧化带O2浓度',
-        two: '三级预警',
-        three: '18%>CO>12%',
-    },
-    {
-        key: '34',
-        one: '回风测氧化带O2浓度',
-        two: '四级预警',
-        three: 'CO>18%',
-    },
-    {
-        key: '35',
-        one: '月推进度',
-        two: '一级预警',
-        three: 'LS<0.95LX',
-    },
-    {
-        key: '36',
-        one: '月推进度',
-        two: '二级预警',
-        three: 'LS<0.9LX',
-    },
-    {
-        key: '37',
-        one: '月推进度',
-        two: '三级预警',
-        three: 'LS<0.85LX',
-    },
-    {
-        key: '38',
-        one: '月推进度',
-        two: '四级预警',
-        three: 'LS<0.8LX',
-    },
-    {
-        key: '39',
-        one: '皮带最高火灾温度',
-        two: '一级预警',
-        three: '3.5Rp>Rs>1.5Rp',
-    },
-    {
-        key: '40',
-        one: '皮带最高火灾温度',
-        two: '二级预警',
-        three: '6Rp>Rs>3.5Rp',
-    },
-    {
-        key: '41',
-        one: '皮带最高火灾温度',
-        two: '三级预警',
-        three: 'Rs>Rr>6Rp',
-    },
-    {
-        key: '42',
-        one: '皮带最高火灾温度',
-        two: '四级预警',
-        three: 'Rs>Rs',
-    },
-    {
-        key: '43',
-        one: '电缆火灾最高温度',
-        two: '一级预警',
-        three: '有烟雾',
-    },
-    {
-        key: '44',
-        one: '电缆火灾最高温度',
-        two: '二级预警',
-        three: 'Rs>1.5Rp',
-    },
-    {
-        key: '45',
-        one: '电缆火灾最高温度',
-        two: '三级预警',
-        three: 'Rs>Rr>6Rp',
-    },
-    {
-        key: '46',
-        one: '电缆火灾最高温度',
-        two: '四级预警',
-        three: 'Rs>3.5Rp',
-    },
-
-])
-
-let columns = reactive([
-    {
-        title: '序号',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }: { index: number }) =>{
-          if(index>=0 && index<=3){
-            return 1
-          }else if(index>=4 && index<=7){
-            return 2
-          }else if(index>=8 && index<=11){
-            return 3
-          }else if(index>=12 && index<=15){
-            return 4
-          }else if(index>=16 && index<=19){
-            return 5
-          }else if(index>=20 && index<=23){
-            return 6
-          }else if(index==24){
-            return 7
-          }else if(index==25){
-            return 8
-          }else if(index>=26 && index<=29){
-            return 9
-          }else if(index>=30 && index<=33){
-            return 10
-          }else if(index>=34 && index<=37){
-            return 11
-          }else if(index>=38 && index<=41){
-            return 12
-          }else if(index>=42 && index<=45){
-            return 13
-          }
-        },
-        customCell: (_, index) => {
-            if (index == 0) {
-                return { rowSpan: 4 };
-            } else if (index > 0 && index <= 3) {
-                return { rowSpan: 0 };
-            }
-            if (index == 4) {
-                return { rowSpan: 4 };
-            } else if (index > 4 && index <= 7) {
-                return { rowSpan: 0 };
-            }
-            if (index == 8) {
-                return { rowSpan: 4 };
-            } else if (index > 8 && index <= 11) {
-                return { rowSpan: 0 };
-            }
-            if (index == 12) {
-                return { rowSpan: 4 };
-            } else if (index > 12 && index <= 15) {
-                return { rowSpan: 0 };
-            }
-            if (index == 16) {
-                return { rowSpan: 4 };
-            } else if (index > 16 && index <= 19) {
-                return { rowSpan: 0 };
-            }
-            if (index == 20) {
-                return { rowSpan: 4 };
-            } else if (index > 20 && index <= 23) {
-                return { rowSpan: 0 };
-            }
-            if (index == 26) {
-                return { rowSpan: 4 };
-            } else if (index > 26 && index <= 29) {
-                return { rowSpan: 0 };
-            }
-            if (index == 30) {
-                return { rowSpan: 4 };
-            } else if (index > 30 && index <= 33) {
-                return { rowSpan: 0 };
-            }
-            if (index == 34) {
-                return { rowSpan: 4 };
-            } else if (index > 34 && index <= 37) {
-                return { rowSpan: 0 };
-            }
-            if (index == 38) {
-                return { rowSpan: 4 };
-            } else if (index > 38 && index <= 41) {
-                return { rowSpan: 0 };
-            }
-            if (index == 42) {
-                return { rowSpan: 4 };
-            } else if (index > 42 && index <= 45) {
-                return { rowSpan: 0 };
-            }
-        },
-    },
-    {
-        title: '指标',
-        dataIndex: 'one',
-        align: 'center',
-        customCell: (_, index) => {
-            if (index == 0) {
-                return { rowSpan: 4 };
-            } else if (index > 0 && index <= 3) {
-                return { rowSpan: 0 };
-            }
-            if (index == 4) {
-                return { rowSpan: 4 };
-            } else if (index > 4 && index <= 7) {
-                return { rowSpan: 0 };
-            }
-            if (index == 8) {
-                return { rowSpan: 4 };
-            } else if (index > 8 && index <= 11) {
-                return { rowSpan: 0 };
-            }
-            if (index == 12) {
-                return { rowSpan: 4 };
-            } else if (index > 12 && index <= 15) {
-                return { rowSpan: 0 };
-            }
-            if (index == 16) {
-                return { rowSpan: 4 };
-            } else if (index > 16 && index <= 19) {
-                return { rowSpan: 0 };
-            }
-            if (index == 20) {
-                return { rowSpan: 4 };
-            } else if (index > 20 && index <= 23) {
-                return { rowSpan: 0 };
-            }
-            if (index == 26) {
-                return { rowSpan: 4 };
-            } else if (index > 26 && index <= 29) {
-                return { rowSpan: 0 };
-            }
-            if (index == 30) {
-                return { rowSpan: 4 };
-            } else if (index > 30 && index <= 33) {
-                return { rowSpan: 0 };
-            }
-            if (index == 34) {
-                return { rowSpan: 4 };
-            } else if (index > 34 && index <= 37) {
-                return { rowSpan: 0 };
-            }
-            if (index == 38) {
-                return { rowSpan: 4 };
-            } else if (index > 38 && index <= 41) {
-                return { rowSpan: 0 };
-            }
-            if (index == 42) {
-                return { rowSpan: 4 };
-            } else if (index > 42 && index <= 45) {
-                return { rowSpan: 0 };
-            }
-        },
-    },
-    {
-        title: '预警级别',
-        dataIndex: 'two',
-        align: 'center',
-    },
-    {
-        title: '阈值',
-        align: 'center',
-        dataIndex: 'three',
-
-    },
-])
-
-</script>
-
-<style lang="less" scoped>
-.warnTargetFire {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/common/warnTargetGas.vue

@@ -1,336 +0,0 @@
-<template>
-    <div class="warnTarget">
-        <a-table :columns="columns" :data-source="tableData" bordered :pagination="false" :scroll="{ y: 700 }">
-            <template #bodyCell="{ column, text }">
-                <template v-if="column.dataIndex === 'name'">
-                    <a href="javascript:;">{{ text }}</a>
-                </template>
-            </template>
-        </a-table>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-let tableData = ref<any[]>([
-    {
-        key: '1',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '甲烷浓度',
-        warnLow: '（0，0.8%）',
-        warnCen: '（0.8%，1.0%）',
-        warnJg: '（1.0%，1.5%）',
-        warnHign: '（1.5%，+）',
-    },
-    {
-        key: '2',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '甲烷浓度单班浮动',
-        warnLow: '（0，0.15%）',
-        warnCen: '（0.15%，0.20%）',
-        warnJg: '（0.20%，0.30%）',
-        warnHign: '（0.30%，+）',
-    },
-    {
-        key: '3',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '甲烷浓度邻班浮动',
-        warnLow: '（0，0.15%）',
-        warnCen: '（0.15%，0.20%）',
-        warnJg: '（0.20%，0.30%）',
-        warnHign: '（0.30%，+）',
-    },
-    {
-        key: '4',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '滑动平均值',
-        warnLow: '（0，0.20%）',
-        warnCen: '（0.20%，0.30%）',
-        warnJg: '（0.30%，0.40%）',
-        warnHign: '（0.40%，+）',
-    },
-    {
-        key: '5',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '离散率',
-        warnLow: '（0，0.06%）',
-        warnCen: '（0.06%，0.08%）',
-        warnJg: '（0.08%，0.10%）',
-        warnHign: '（0.10%，+）',
-    },
-    {
-        key: '6',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '变化率',
-        warnLow: '（0，0.04%）',
-        warnCen: '（0.04%，0.06%）',
-        warnJg: '（0.06%，0.08%）',
-        warnHign: '（0.08%，+）',
-    },
-    {
-        key: '7',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '异常持续时间',
-        warnLow: '（0，1）',
-        warnCen: '（1，2）',
-        warnJg: '（2，3）',
-        warnHign: '（3，+）',
-    },
-    {
-        key: '8',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '二氧化碳浓度',
-        warnLow: '（0，0.50%）',
-        warnCen: '（0.50%，0.75%）',
-        warnJg: '（0.75%，1.5%）',
-        warnHign: '（1.5%，+）',
-    },
-    {
-        key: '9',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '风速',
-        warnLow: '（0，0.15）',
-        warnCen: '（0.15，0.25）',
-        warnJg: '（0.25，1.0）',
-        warnHign: '（1.0，+）',
-    },
-    {
-        key: '10',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '吨煤瓦斯涌出量',
-        warnLow: '（0，6）',
-        warnCen: '（6，8）',
-        warnJg: '（8，10）',
-        warnHign: '（10，+）',
-    },
-    {
-        key: '11',
-        one: '监测监控',
-        two: '瓦斯涌出',
-        three: '炮后吨煤瓦斯涌出量V30',
-        warnLow: '（0，8）',
-        warnCen: '（8，10）',
-        warnJg: '（10，12）',
-        warnHign: '（12，+）',
-    },
-    {
-        key: '12',
-        one: '监测监控',
-        two: '瓦斯抽采',
-        three: '残余瓦斯含量（抽采计算）',
-        warnLow: '（0，5）',
-        warnCen: '（5，6）',
-        warnJg: '（6，8）',
-        warnHign: '（8，+）',
-    },
-    {
-        key: '13',
-        one: '监测监控',
-        two: '气压变化',
-        three: '风压极差',
-        warnLow: '（0，1）',
-        warnCen: '（1，2.5）',
-        warnJg: '（2.5，4）',
-        warnHign: '（4，+）',
-    },
-    {
-        key: '14',
-        one: '瓦斯地质',
-        two: '瓦斯赋存',
-        three: '原始瓦斯含量',
-        warnLow: '（0，6）',
-        warnCen: '（6，8）',
-        warnJg: '（8，10）',
-        warnHign: '（10，+）',
-    },
-    {
-        key: '15',
-        one: '瓦斯地质',
-        two: '瓦斯赋存',
-        three: '残余瓦斯含量',
-        warnLow: '（0，5）',
-        warnCen: '（5，6）',
-        warnJg: '（6，8）',
-        warnHign: '（8，+）',
-    },
-    {
-        key: '16',
-        one: '瓦斯地质',
-        two: '瓦斯赋存',
-        three: '瓦斯压力',
-        warnLow: '（0，0.5）',
-        warnCen: '（0.5，0.74）',
-        warnJg: '（0.74，1.0）',
-        warnHign: '（1.0，+）',
-    },
-    {
-        key: '17',
-        one: '瓦斯地质',
-        two: '煤层赋存',
-        three: '煤层厚度',
-        warnLow: '（0，1.3）',
-        warnCen: '（1.3，3.5）',
-        warnJg: '（3.5，8.0）',
-        warnHign: '（8.0，+）',
-    },
-    {
-        key: '18',
-        one: '瓦斯地质',
-        two: '煤层赋存',
-        three: '厚度变化',
-        warnLow: '（0，5%）',
-        warnCen: '（5%，10%）',
-        warnJg: '（10%，15%）',
-        warnHign: '（15%，+）',
-    },
-    {
-        key: '19',
-        one: '瓦斯地质',
-        two: '煤层赋存',
-        three: '煤层倾角',
-        warnLow: '（0，8）',
-        warnCen: '（8，25）',
-        warnJg: '（25，45）',
-        warnHign: '（45，+）',
-    },
-    {
-        key: '20',
-        one: '瓦斯地质',
-        two: '煤层赋存',
-        three: '倾角变化',
-        warnLow: '（0，5%）',
-        warnCen: '（5%，10%）',
-        warnJg: '（10%，15%）',
-        warnHign: '（15%，+）',
-    },
-    {
-        key: '21',
-        one: '瓦斯地质',
-        two: '地质构造',
-        three: '构造距离',
-        warnLow: '（50，+）',
-        warnCen: '（50，30）',
-        warnJg: '（30，5）',
-        warnHign: '（5，0）',
-    },
-
-])
-
-let columns = reactive([
-    {
-        title: '序号',
-        width: 60,
-        align: 'center',
-        customRender: ({ index }: { index: number }) => {
-            if (index >= 0 && index <= 12) {
-                return 1
-            } else {
-                return 2
-            }
-        },
-        customCell: (_, index) => {
-            if (index == 0) {
-                return { rowSpan: 13 };
-            } else if (index > 0 && index <= 12) {
-                return { rowSpan: 0 };
-            }
-            if (index == 13) {
-                return { rowSpan: 8 };
-            } else if (index > 13 && index <= 20) {
-                return { rowSpan: 0 };
-            }
-
-        },
-    },
-    {
-        title: '一级指标',
-        dataIndex: 'one',
-        align: 'center',
-        customCell: (_, index) => {
-            if (index == 0) {
-                return { rowSpan: 13 };
-            } else if (index > 0 && index <= 12) {
-                return { rowSpan: 0 };
-            }
-            if (index == 13) {
-                return { rowSpan: 8 };
-            } else if (index > 13 && index <= 20) {
-                return { rowSpan: 0 };
-            }
-
-        },
-    },
-    {
-        title: '二级指标',
-        dataIndex: 'two',
-        align: 'center',
-        customCell: (_, index) => {
-            if (index == 0) {
-                return { rowSpan: 11 };
-            } else if (index > 0 && index <= 10) {
-                return { rowSpan: 0 };
-            }
-            if (index == 13) {
-                return { rowSpan: 3 };
-            } else if (index > 13 && index <= 15) {
-                return { rowSpan: 0 };
-            }
-            if (index == 16) {
-                return { rowSpan: 4 };
-            } else if (index > 16 && index <= 19) {
-                return { rowSpan: 0 };
-            }
-
-
-        },
-    },
-    {
-        title: '三级指标',
-        align: 'center',
-        dataIndex: 'three',
-
-    },
-    {
-        title: '低风险',
-        dataIndex: 'warnLow',
-        align: 'center',
-    },
-    {
-        title: '一般风险',
-        dataIndex: 'warnCen',
-        align: 'center',
-    },
-    {
-        title: '较高风险',
-        dataIndex: 'warnJg',
-        align: 'center',
-    },
-    {
-        title: '高风险',
-        dataIndex: 'warnHign',
-        align: 'center',
-    },
-
-])
-
-</script>
-
-<style lang="less" scoped>
-.warnTarget {
-    width: 100%;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-}
-</style>

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

@@ -1,1472 +0,0 @@
-<template>
-  <customHeader>预警监测管控系统</customHeader>
-  <div class="sensor-container">
-    <div class="lr left-box">
-      <ventBox1>
-        <template #title>
-          <div class="monitor-title" @click="showModal('vent')">通风监测预警</div>
-        </template>
-        <template #container>
-          <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
-          <div class="vent-param">
-            <div class="light-group">
-              <div class="param-item">
-                <div class="param">
-                  <div class="param-icon">
-                    <div class="param-title">总进风量</div>
-                    <div class="param-unit">(m³/min)</div>
-                  </div>
-
-                  <div class="param-val-box">
-                    <div class="param-val-icon"></div>
-                    <div class="param-val">{{ windData.jf || 0 }}</div>
-                  </div>
-                </div>
-              </div>
-              <div class="param-item">
-                <div class="param">
-                  <div class="param-icon">
-                    <div class="param-title">总回风量</div>
-                    <div class="param-unit">(m³/min)</div>
-                  </div>
-                  <div class="param-val-box">
-                    <div class="param-val-icon"></div>
-                    <div class="param-val">{{ windData.hf || 0 }}</div>
-                  </div>
-                </div>
-              </div>
-              <div class="param-item">
-                <div class="param">
-                  <div class="param-icon">
-                    <div class="param-title">总需风量</div>
-                    <div class="param-unit">(m³/min)</div>
-                  </div>
-                  <div class="param-val-box">
-                    <div class="param-val-icon"></div>
-                    <div class="param-val">{{ windData.xf || 0 }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
-          <BarSingle :xAxisData="xAxisData" :dataSource="windData.levels" height="225px" :chartsColumns="chartsColumns"
-            :option="option" :color="colors" :fontColor="fontColor" />
-        </template>
-      </ventBox1>
-      <ventBox1 class="vent-margin-t-10">
-        <template #title>
-          <div class="monitor-title" @click="showModal('sbyj')">设备监测预警</div>
-        </template>
-        <template #container>
-          <div class="icons-box" @mouseleave="resetScroll">
-            <template v-for="(item, key) in iconsMonitor" :key="key">
-              <div class="icon-item" v-if="[0, 101, 103, 104, 201].includes(item.level)">
-                <div class="wrapper">
-                  {{ item.text }}
-                </div>
-                <div></div>
-                <img :src="item.url" :alt="item.text" />
-                <div class="level-text" :class="{
-                  'level-text-0': item.level == 0,
-                  'level-text-1': item.level == 101,
-                  'level-text-2': item.level == 102,
-                  'level-text-3': item.level == 103,
-                  'level-text-4': item.level == 104,
-                  'level-text-5': item.level == 201,
-                  'level-text-6':
-                    item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
-                }">{{
-                    item.level == 0
-                      ? '低风险'
-                      : item.level == 101
-                        ? '低风险'
-                        : item.level == 102
-                          ? '一般风险'
-                          : item.level == 103
-                            ? '较大风险'
-                            : item.level == 104
-                              ? '较大风险'
-                              : item.level == 201
-                                ? '报警'
-                                : '未连接'
-                  }}</div>
-              </div>
-            </template>
-          </div>
-        </template>
-      </ventBox1>
-    </div>
-    <div class="center-box">
-      <div class="animation-box">
-        <canvas class="rain"></canvas>
-        <div class="bottom" :class="{
-          bottom1: centerData.levels == 101 || centerData.levels == 0 || centerData.levels == 10000,
-          bottom2: centerData.levels == 102,
-          bottom3: centerData.levels == 103,
-          bottom4: centerData.levels == 104,
-          bottom5: centerData.levels == 201,
-        }">
-          <div class="animation1">
-            <div class="ball"></div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559"
-              style="opacity: 0.5">
-              <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
-                <path id="椭圆_2595" data-name="椭圆 2595"
-                  d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
-                  transform="translate(755.808 140.636)" fill="#28a6ff" opacity="0.7" />
-              </g>
-            </svg>
-          </div>
-          <div class="animation2">
-            <div class="ball1"></div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7" viewBox="0 0 414.878 91.7">
-              <g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
-                <path id="椭圆_2595" data-name="椭圆 2595"
-                  d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
-                  transform="translate(722.572 159.023)" fill="#3dd8ff" opacity="0.5" />
-              </g>
-            </svg>
-          </div>
-          <div class="text-box">
-            <div class="text1">{{
-              centerData.levels == 101
-                ? '低风险'
-                : centerData.levels == 102
-                  ? '一般风险'
-                  : centerData.levels == 103
-                    ? '较大风险'
-                    : centerData.levels == 104
-                      ? '重大风险'
-                      : centerData.levels == 201
-                        ? '报警'
-                        : // : centerData.levels == 0
-                        // ? '正常'
-                        // : centerData.levels == 10000
-                        // ? '正常'
-                        '低风险'
-            }}</div>
-            <div class="text2">风险分析</div>
-          </div>
-          <div class="icon-animation"></div>
-        </div>
-
-        <div class="total-item-monitor-box">
-          <div class="item item1">
-            <div class="icon-box">
-              <div class="icon"></div>
-            </div>
-            <div class="item-monitor-box">
-              <span class="title">火灾监测预警</span>
-              <span :class="centerData.fire ? 'value' : 'value1'">{{ centerData.fire == '正常' ? '低风险' : centerData.fire
-                }}</span>
-            </div>
-          </div>
-          <div class="item item2">
-            <div class="icon-box">
-              <div class="icon"></div>
-            </div>
-            <div class="item-monitor-box">
-              <span class="title">设备监测预警</span>
-              <span :class="centerData.sb ? 'value' : 'value1'">{{ centerData.sb == '正常' ? '低风险' : centerData.sb
-                }}</span>
-            </div>
-          </div>
-          <div class="item item3">
-            <div class="icon-box">
-              <div class="icon"></div>
-            </div>
-            <div class="item-monitor-box">
-              <span class="title">粉尘监测预警</span>
-              <span :class="centerData.fc ? 'value' : 'value1'">{{ centerData.fc == '正常' ? '低风险' : centerData.fc
-                }}</span>
-            </div>
-          </div>
-          <div class="item item4">
-            <div class="icon-box">
-              <div class="icon"></div>
-            </div>
-            <div class="item-monitor-box">
-              <span class="title">瓦斯监测预警</span>
-              <span :class="centerData.ws ? 'value' : 'value1'">{{ centerData.ws == '正常' ? '低风险' : centerData.ws
-                }}</span>
-              <div class="">
-                <span class="title">矿井瓦斯鉴定等级监测</span>
-                <span class="value">低瓦斯</span>
-              </div>
-            </div>
-          </div>
-          <div class="item item5">
-            <div class="icon-box">
-              <div class="icon"></div>
-            </div>
-            <div class="item-monitor-box">
-              <span class="title">通风监测预警</span>
-              <span :class="centerData.tf ? 'value' : 'value1'">{{ centerData.tf == '正常' ? '低风险' : centerData.tf
-                }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="fire-monitor">
-        <div class="monitor-title top" @click="showModal('fire')">火灾监测预警</div>
-        <div class="container">
-          <div class="item item1">
-            <div class="icon"></div>
-            <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
-              <div :class="{
-                value1: item.level == 0,
-                value2: item.level == 101,
-                value3: item.level == 102,
-                value4: item.level == 103,
-                value5: item.level == 104,
-                value6: item.level == 201,
-                value: item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
-              }">{{ item.value ? item.value : '-' }}
-              </div>
-              <div class="title">{{ item.title }}</div>
-            </div>
-          </div>
-          <div class="item">
-            <div class="icon"></div>
-            <div class="data-box" v-for="(item, index) in fireMonitor" :key="index">
-              <div class="value1"> {{ !item.value ? '-' : item.value == '正常' ? '低风险' : item.value }} </div>
-              <div class="title">{{ item.title }}</div>
-            </div>
-          </div>
-        </div>
-        <div class="bottom"></div>
-      </div>
-    </div>
-    <div class="lr right-box">
-      <ventBox1>
-        <template #title>
-          <div class="monitor-title" @click="showModal('gas')">瓦斯监测预警</div>
-        </template>
-        <template #container>
-          <div class="gas-box">
-            <div class="gas-item">
-              <div class="top">
-                <div class="value">{{ gasData.sums }}</div>
-                <div class="title">安全监测系统监测点</div>
-              </div>
-              <div class="detail-box">
-                <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
-                  <div class="">{{ item.label }}</div>
-                  <div class="value">{{ !item.value && item.value != '0' ? '-' : item.value }}</div>
-                </div>
-              </div>
-            </div>
-            <div class="gas-item">
-              <div class="top">
-                <div class="value">{{ gasData.sums1 != 0 ? gasData.sums1 : '-' }}</div>
-                <div class="title">瓦斯抽采系统监测点</div>
-              </div>
-              <div class="detail-box">
-                <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
-                  <div class="">{{ item.label }}</div>
-                  <div class="value">{{ !item.value1 && item.value1 != '0' ? '-' : item.value1 }}</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </ventBox1>
-      <ventBox1 class="vent-margin-t-10">
-        <template #title>
-          <div class="monitor-title" @click="showModal('dust')">粉尘监测预警</div>
-        </template>
-        <template #container>
-          <!-- <div class="dust-monitor">
-            <div v-for="(item, index) in dustMonitor" :key="index" class="item-box">
-              <div class="title">{{ item.title }}</div>
-              <div class="value">0个</div>
-            </div>
-          </div> -->
-
-          <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
-            :option="option" :color="colors" :fontColor="fontColor" />
-        </template>
-      </ventBox1>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
-import { useRouter } from 'vue-router';
-import customHeader from '/@/components/vent/customHeader.vue';
-import { getTotalList, sysTypeWarnList } from './alarm.api';
-import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor, fireMonitor1 } from './alarm.data';
-import ventBox1 from '/@/components/vent/ventBox1.vue';
-import BarSingle from '../../../../components/chart/BarSingle.vue';
-import { rainBg } from '/@/utils/ui.js';
-
-let router = useRouter();
-
-const warnNumMap = new Map([
-  ['fire', 0],
-  ['dust', 0],
-  ['vent', 0],
-  ['gas', 0],
-]);
-
-const resetScroll = (e: Event) => {
-  if (e.target && e.target) (e.target as Element).scrollTop = 0;
-};
-let windData = reactive({
-  levels: {},
-  jf: 0,
-  hf: 0,
-  xf: 0,
-}); //通风监测数据
-let dustData = reactive({
-  //粉尘监测数据
-  levels: {},
-});
-let centerData = reactive({
-  fire: '',
-  tf: '',
-  ws: '',
-  sb: '',
-  fc: '',
-  levels: 0,
-});
-//瓦斯
-let gasMonitor = reactive<any[]>([]);
-let gasData = {
-  sums: 0,
-  sums1: 0,
-};
-
-//跳转详情
-function showModal(data) {
-  switch (data) {
-    case 'vent':
-      router.push('/ventilate/warn/home');
-      break;
-    case 'fire':
-      router.push('/fire/warn/home');
-      break;
-    case 'dust':
-      router.push('/dust/warn/home');
-      break;
-    case 'gas':
-      router.push('/gas/warn/home');
-      break;
-    case 'sbyj':
-      router.push('/device/warn/home');
-      break;
-  }
-}
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag = false) {
-  timer = setTimeout(
-    async () => {
-      // await getDataSource();
-      await getList();
-      if (timer) {
-        timer = null;
-      }
-      getMonitor();
-    },
-    flag ? 0 : 10000
-  );
-}
-
-// 获取预警数据
-async function getList() {
-  const res = await getTotalList({});
-  console.log(res, '预警数据--------------');
-  let data = [];
-  windData.levels = res.info.sysInfo.ventS.levels;
-  windData.levels['blue'] = warnNumMap.get('vent');
-  // windData.jf = res.ventInfo.zongfengliang;
-  windData.jf = res.ventInfo.zongjinfeng;
-  windData.hf = res.ventInfo.zonghuifeng;
-  windData.xf = res.ventInfo.xufengliang;
-  dustData.levels = res.info.sysInfo.dustS.levels;
-  dustData.levels['blue'] = warnNumMap.get('dust');
-  centerData.fire = res.info.sysInfo.fireS.status;
-  centerData.tf = res.info.sysInfo.ventS.status;
-  centerData.ws = res.info.sysInfo.gasS.status;
-  centerData.sb = res.info.deviceWarnInfo.status;
-  centerData.fc = res.info.sysInfo.dustS.status;
-  Object.keys(res.info.sysInfo).forEach((v) => {
-    if (res.info.sysInfo[v].maxLevel) {
-      data.push(res.info.sysInfo[v].maxLevel);
-    } else {
-      data.push(0);
-    }
-  });
-  data = data.sort((a, b) => b - a);
-  centerData.levels = data[0];
-  Object.keys(iconsMonitor).forEach((el) => {
-    if (res.info.devicekindInfo[el]) {
-      iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
-    }
-  });
-  fireMonitor[0].value =
-    res.info.sysInfo.fireS.summaryInfo.external.temperature && res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel == '0'
-      ? '正常'
-      : '';
-  fireMonitor[1].value =
-    res.info.sysInfo.fireS.summaryInfo.external.smokeval &&
-      res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel &&
-      res.info.sysInfo.fireS.summaryInfo.external.smokeval.maxlevel == '0'
-      ? '正常'
-      : '';
-  fireMonitor[2].value =
-    res.info.sysInfo.fireS.summaryInfo.external.fireval &&
-      res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel &&
-      res.info.sysInfo.fireS.summaryInfo.external.fireval.maxlevel == '0'
-      ? '正常'
-      : '';
-  fireMonitor[3].value =
-    res.info.sysInfo.fireS.summaryInfo.external.coval && res.info.sysInfo.fireS.summaryInfo.external.coval.value
-      ? res.info.sysInfo.fireS.summaryInfo.external.coval.value
-      : '';
-
-  // fireMonitor[0].level = res.info.sysInfo.fireS.summaryInfo.external.temperature ? res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel : '';
-  // fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.value : '';
-  // fireMonitor[1].level = res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.maxlevel : '';
-  // fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval ? res.info.sysInfo.fireS.summaryInfo.external.chval.value : '';
-  // fireMonitor[2].level = res.info.sysInfo.fireS.summaryInfo.external.chval ? res.info.sysInfo.fireS.summaryInfo.external.chval.maxlevel : '';
-  // fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val ? res.info.sysInfo.fireS.summaryInfo.external.ch2val.value : '';
-  // fireMonitor[3].level = res.info.sysInfo.fireS.summaryInfo.external.ch2val ? res.info.sysInfo.fireS.summaryInfo.external.ch2val.maxlevel : '';
-  // fireMonitor[4].value = res.info.sysInfo.fireS.summaryInfo.external.co2val ? res.info.sysInfo.fireS.summaryInfo.external.co2val.value : '';
-  // fireMonitor[4].level = res.info.sysInfo.fireS.summaryInfo.external.co2val ? res.info.sysInfo.fireS.summaryInfo.external.co2val.maxlevel : '';
-  // fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val ? res.info.sysInfo.fireS.summaryInfo.external.o2val.value : '';
-  // fireMonitor[5].level = res.info.sysInfo.fireS.summaryInfo.external.o2val ? res.info.sysInfo.fireS.summaryInfo.external.o2val.maxlevel : '';
-
-  // fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval ? res.info.sysInfo.fireS.summaryInfo.internal.coval.value : '';
-  fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval ? '50.0' : '';
-  // fireMonitor1[0].value = '';
-  fireMonitor1[0].level = res.info.sysInfo.fireS.summaryInfo.internal.coval ? res.info.sysInfo.fireS.summaryInfo.internal.coval.maxlevel : '';
-  fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.chval ? res.info.sysInfo.fireS.summaryInfo.internal.chval.value : '';
-  fireMonitor1[1].level = res.info.sysInfo.fireS.summaryInfo.internal.chval ? res.info.sysInfo.fireS.summaryInfo.internal.chval.maxlevel : '';
-  fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val ? res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value : '';
-  fireMonitor1[2].level = res.info.sysInfo.fireS.summaryInfo.internal.ch2val ? res.info.sysInfo.fireS.summaryInfo.internal.ch2val.maxlevel : '';
-  fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val ? res.info.sysInfo.fireS.summaryInfo.internal.co2val.value : '';
-  fireMonitor1[3].level = res.info.sysInfo.fireS.summaryInfo.internal.co2val ? res.info.sysInfo.fireS.summaryInfo.internal.co2val.maxlevel : '';
-  fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val ? res.info.sysInfo.fireS.summaryInfo.internal.o2val.value : '';
-  fireMonitor1[4].level = res.info.sysInfo.fireS.summaryInfo.internal.o2val ? res.info.sysInfo.fireS.summaryInfo.internal.o2val.maxlevel : '';
-  gasMonitor.length = 0;
-  gasData.sums = 0;
-  gasData.sums1 = 0;
-  res.info.sysInfo.gasS.devices.forEach((el) => {
-    gasData.sums += el.gasNumber;
-    gasData.sums1 += el.pumpNumber;
-    gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber });
-  });
-}
-
-function getLevelNum() {
-  return new Promise(async (resolve) => {
-    const typeArr = ['fire', 'dust', 'vent', 'gas'];
-    for (let i = 0; i < typeArr.length; i++) {
-      const type = typeArr[i];
-      const result = await sysTypeWarnList({ type });
-      warnNumMap.set(type, result['length']);
-    }
-    resolve(null);
-  });
-}
-
-onMounted(async () => {
-  await getLevelNum();
-  await getMonitor(true);
-  rainBg('rain', 'animation-box');
-});
-
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
-</script>
-<style lang="less" scoped>
-@import '/@/design/vent/color.less';
-@a: 370px; // 椭圆x轴半径(长半径)
-@b: 107px; // 椭圆y轴半径(短半径)
-@s: 40; // 坐标点的数目(数目越大，动画越精细)
-
-@bg: #e6e2df;
-
-.loop(@index) when (@index < @s + 1) {
-  .loop((@index + 1));
-  @keyframeSel: @index * 100% ./ @s;
-
-  @{keyframeSel} {
-    transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
-  }
-}
-
-.sensor-container {
-  width: 100%;
-  height: calc(100% - 86px);
-  display: flex;
-  position: relative;
-  top: 78px;
-
-  .lr {
-    width: 650px;
-    height: 100%;
-
-    // background-color: #ffffff10;
-  }
-
-  .left-box {
-    .vent-param {
-      width: 100%;
-      margin-top: 10px;
-
-      .light-group {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        position: relative;
-
-        .param-item {
-          width: 150px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-          position: reactive;
-
-          .icon {
-            display: block;
-            position: absolute;
-            top: -5px;
-          }
-
-          .param {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-
-            .param-icon {
-              width: 121px;
-              height: 69px;
-              background: url('/@/assets/images/vent/vent-param-bg.png');
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              position: relative;
-              top: -20px;
-              margin-top: 10px;
-
-              .param-title {
-                position: relative;
-                top: -4px;
-              }
-
-              .param-unit {
-                position: relative;
-                top: -2px;
-                font-size: 12px;
-              }
-            }
-
-            .param-val-box {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-              align-items: center;
-              position: relative;
-              top: -20px;
-
-              .param-val-icon {
-                width: 2px;
-                height: 15px;
-                background: #00d8ff;
-                position: relative;
-
-                &::after {
-                  content: '';
-                  display: block;
-                  position: absolute;
-                  width: 6px;
-                  height: 6px;
-                  border-radius: 3px;
-                  background: #00d8ff;
-                  bottom: -2px;
-                  left: -2px;
-                }
-              }
-
-              .param-val {
-                position: relative;
-                font-family: 'douyuFont';
-                // color: #20dbfd;
-                text-shadow: 0 0 25px #00d8ff;
-                font-size: 13px;
-                border: 1px solid #40b7f3;
-                padding: 5px 30px 2px 30px;
-                top: 2px;
-
-                &::after {
-                  width: calc(100% - 4px);
-                  height: calc(100% - 4px);
-                  content: '';
-                  position: absolute;
-                  top: 2px;
-                  left: 2px;
-                  display: block;
-                  border: 1px solid #006ea6;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .icons-box {
-      display: flex;
-      flex-wrap: wrap;
-      // max-height: 365px;
-      height: 365px;
-      overflow-y: hidden;
-
-      // align-items: start ;
-      &:hover {
-        overflow-y: auto;
-        overflow-x: auto;
-
-        // &>.icon-item {
-        //   animation-play-state: paused;
-        //   animation: move1 2s linear;
-        // }
-      }
-
-      .icon-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 3px;
-        // animation: move 10s linear infinite;
-
-        &:nth-child(even) {
-          padding-right: 0px;
-        }
-
-        .level-text {
-          position: absolute;
-          top: 51px;
-          right: 25px;
-          color: #fff;
-          font-family: 'douyuFont';
-          font-size: 12px;
-        }
-
-        .level-text-0 {
-          color: rgb(145, 230, 9);
-          text-shadow: 2px 2px 4px #001c22;
-        }
-
-        .level-text-1 {
-          color: rgb(0, 242, 255);
-          text-shadow: 2px 2px 4px #001c22;
-        }
-
-        .level-text-2 {
-          color: #ffff35;
-          text-shadow: 2px 2px 4px #313100;
-        }
-
-        .level-text-3 {
-          color: #ffbe69;
-          text-shadow: 2px 2px 4px #271600;
-        }
-
-        .level-text-4 {
-          color: #ff6f00;
-          // color: #09caff;
-          text-shadow: 2px 2px 4px #060200;
-        }
-
-        .level-text-5 {
-          color: #ff0000;
-          text-shadow: 2px 2px 4px #200000;
-        }
-
-        .level-text-6 {
-          color: #bbb;
-          text-shadow: 2px 2px 4px #001c22;
-        }
-
-        img {
-          width: 225px;
-          height: 79px;
-        }
-      }
-
-      .wrapper {
-        position: absolute;
-        top: 48px;
-        left: 82px;
-        color: #ffffffe0;
-        font-size: 13px;
-        text-align: center;
-        letter-spacing: 1px;
-      }
-    }
-
-    @keyframes move {
-      0% {
-        transform: translateY(0px);
-      }
-
-      100% {
-        transform: translateY(-269px);
-      }
-    }
-
-    @keyframes move1 {
-      0% {
-        transform: translateY(0px);
-      }
-    }
-  }
-
-  .center-box {
-    width: calc(100% - 710px);
-    // background-color: #ffffff10;
-    margin: 0 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-
-    .fire-monitor {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      position: relative;
-
-      .top {
-        width: 100%;
-        height: 35px;
-        background: url('/@/assets/images/vent/box-top-bg.png');
-        background-size: 100% 100%;
-        text-align: center;
-        color: #fff;
-        padding-top: 6px;
-      }
-
-      .container {
-        width: calc(100% - 2px);
-        min-height: 50px;
-        padding: 0 10px;
-        color: #fff;
-        background-color: #00213236;
-        backdrop-filter: blur(5px);
-
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          top: 5px;
-          left: 0;
-          width: 1px;
-          height: calc(100% - 10px);
-          background-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
-        }
-
-        &::after {
-          content: '';
-          display: block;
-          position: absolute;
-          right: 0;
-          top: 5px;
-          width: 1px;
-          height: calc(100% - 10px);
-          background: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
-        }
-
-        .item {
-          height: 130px;
-          width: 100%;
-          position: relative;
-          top: -10px;
-          display: flex;
-          // justify-content: space-between;
-          align-content: center;
-          padding-top: 50px;
-
-          &::before {
-            content: '';
-            width: 100%;
-            height: 150px;
-            position: absolute;
-            top: 0px;
-            background: url('/@/assets/images/vent/fire-bg-top.png');
-            background-size: 100% 100%;
-          }
-
-          .icon {
-            width: 82px;
-            height: 36px;
-            margin: 0 20px 0 50px;
-            background: url('/@/assets/images/vent/icon-bottom-bg.png');
-            position: relative;
-            top: 30px;
-
-            &::after {
-              position: absolute;
-              content: '';
-              width: 50px;
-              height: 50px;
-              top: -25px;
-              left: 20px;
-              background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
-            }
-          }
-
-          .data-box {
-            display: flex;
-            flex-direction: column;
-            // margin: 0 10px;
-            width: 118px;
-            align-items: center;
-
-            .value {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              color: #2bdcff;
-              margin-bottom: 5px;
-            }
-
-            .value1 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: rgb(145, 230, 9);
-            }
-
-            .value2 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: rgb(0, 242, 255);
-            }
-
-            .value3 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ffff35;
-            }
-
-            .value4 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ffbe69;
-            }
-
-            .value5 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ff6f00;
-            }
-
-            .value6 {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              margin-bottom: 5px;
-              color: #ff0000;
-            }
-
-            .title {
-              font-size: 13px;
-            }
-          }
-        }
-
-        .item1 {
-          top: -10px;
-
-          &::before {
-            transform: matrix(1, 0, 0, -1, 0, 0);
-          }
-
-          .icon {
-            &::after {
-              background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
-            }
-          }
-        }
-      }
-
-      .bottom {
-        width: 100%;
-        height: 35px;
-        background: url('/@/assets/images/vent/box-bottom-bg.png');
-        background-size: 100% 100%;
-        position: absolute;
-        bottom: 0;
-      }
-    }
-
-    .animation-box {
-      height: fit-content;
-      flex: 1;
-      margin-bottom: 10px;
-      background: url('/@/assets/images/vent/alarm/center-bg.png');
-      background-size: contain;
-      background-position: center;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      position: relative;
-      top: 45px;
-
-      .rain {
-        position: absolute;
-      }
-
-      .bottom {
-        width: 528px;
-        height: 395px;
-        background-repeat: no-repeat;
-        position: absolute;
-        z-index: 999;
-
-        &::before {
-          content: '';
-          width: 325px;
-          height: 379px;
-          position: absolute;
-          left: 105px;
-          top: -60px;
-          background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
-        }
-
-        .animation1 {
-          width: 390px;
-          height: 78px;
-          position: absolute;
-          top: -30px;
-          left: 80px;
-          z-index: 999;
-
-          // animation: rotate3 3s linear infinite;
-          .ball {
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-            border-radius: 6px;
-            background-size: cover;
-            offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z'
-              );
-            animation: 10s linear 0s infinite alternate ball;
-          }
-        }
-
-        .animation2 {
-          width: 430px;
-          height: 92px;
-          position: absolute;
-          top: 0px;
-          left: 60px;
-          z-index: 999;
-
-          // animation: rotate4 3s linear infinite;
-          .ball1 {
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
-            border-radius: 6px;
-            background-size: cover;
-            offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z'
-              );
-            animation: 10s linear 0s infinite alternate ball1;
-          }
-        }
-
-        .text-box {
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-          color: #fff;
-          align-items: center;
-          margin-top: 90px;
-
-          .text1 {
-            font-size: 26px;
-            font-weight: 600;
-            letter-spacing: 2px;
-            margin-bottom: 10px;
-          }
-
-          .text2 {
-            font-size: 18px;
-            color: #ffffffdd;
-          }
-        }
-
-        .icon-animation {
-          width: 178px;
-          height: 208px;
-          margin: 0 auto;
-          top: -130px;
-          left: 4px;
-          position: relative;
-          animation: 0.5s linear 0s infinite alternate iconMove;
-        }
-      }
-
-      .bottom1 {
-        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
-
-        .icon-animation {
-          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
-        }
-
-        .text-box {
-          .text1 {
-            color: #00d8ff;
-          }
-        }
-      }
-
-      .bottom2 {
-        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
-
-        .icon-animation {
-          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
-        }
-
-        .text-box {
-          .text1 {
-            color: #fcfc22;
-          }
-        }
-      }
-
-      .bottom3 {
-        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
-
-        .icon-animation {
-          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
-        }
-
-        .text-box {
-          .text1 {
-            color: #ff7010;
-          }
-        }
-      }
-
-      .bottom4 {
-        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
-
-        .icon-animation {
-          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
-        }
-
-        .text-box {
-          .text1 {
-            color: #df4e43;
-          }
-        }
-      }
-
-      .bottom5 {
-        background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
-
-        .icon-animation {
-          background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
-        }
-
-        .text-box {
-          .text1 {
-            color: #ff2313;
-            // animation: color-blink 1s infinite;
-          }
-
-          // @keyframes color-blink {
-          //   0% { color: red; }
-          //   50% { color: blue; }
-          //   100% { color: red; }
-          // }
-        }
-      }
-
-      .total-item-monitor-box {
-        width: 100%;
-        height: 237px;
-        position: relative;
-        top: 180px;
-        left: 265px;
-        background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
-        background-size: contain;
-
-        &::after {
-          content: '';
-          width: 750px;
-          height: 750px;
-          position: absolute;
-          transform-style: preserve-3d;
-          transform: translateX(0%) translateY(0%) rotateX(72deg);
-          background: url('/@/assets/images/vent/alarm/bottom.png');
-          animation: rotate1 3s linear infinite;
-          top: -200px;
-          left: -180px;
-        }
-
-        .item {
-          position: absolute;
-
-          // width: 107px;
-          // height: 107px;
-          // left: 120px;
-          // top: 115px;
-          // animation: red-ball 10s linear infinite;
-          .icon-box {
-            width: 100px;
-            height: 100px;
-
-            position: relative;
-            z-index: 0;
-
-            &::before {
-              position: absolute;
-              content: '';
-              width: 105px;
-              height: 68px;
-              top: 15px;
-              z-index: -1;
-              background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
-            }
-
-            &::after {
-              position: absolute;
-              content: '';
-              width: 71px;
-              height: 71px;
-              top: 26px;
-              left: 14px;
-              z-index: 1;
-              background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
-              transform: translateX(0%) rotateX(70deg);
-              animation: rotate2 2s linear infinite;
-            }
-
-            .icon {
-              width: 100px;
-              height: 100px;
-              background-repeat: no-repeat;
-              background-position: top center;
-              position: relative;
-              top: 5px;
-            }
-          }
-
-          .item-monitor-box {
-            color: #fff;
-            position: relative;
-            top: -135px;
-            left: -20px;
-            font-weight: 600;
-            // background: #06020066;
-            padding: 5px 20px 8px 20px;
-
-            &::before {
-              position: absolute;
-              content: '';
-              width: 196px;
-              height: 48px;
-              left: -20px;
-              top: -10px;
-              background: url('/@/assets/images/vent/alarm/data-bg.png');
-            }
-
-            .value {
-              color: #2bdcff;
-              margin-left: 20px;
-            }
-
-            .value1 {
-              font-size: 16px;
-              font-weight: 800;
-              margin-top: 6px;
-              margin-left: 10px;
-              color: #ff0000;
-              animation: color-blink 1s infinite;
-            }
-
-            @keyframes color-blink {
-              0% {
-                color: red;
-              }
-
-              50% {
-                color: rgb(198, 0, 0);
-              }
-
-              100% {
-                color: rgb(255, 18, 18);
-              }
-            }
-          }
-        }
-
-        .item1 {
-          top: 230px;
-          left: 150px;
-
-          .icon {
-            background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
-          }
-        }
-
-        .item2 {
-          top: 185px;
-          left: -120px;
-
-          .icon {
-            background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
-          }
-        }
-
-        .item3 {
-          top: 185px;
-          left: 420px;
-
-          .icon {
-            background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
-          }
-        }
-
-        .item4 {
-          top: 20px;
-          left: 390px;
-
-          .icon {
-            background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
-          }
-
-          .item-monitor-box {
-            top: -155px;
-
-            &::before {
-              top: 10px;
-            }
-          }
-        }
-
-        .item5 {
-          top: 25px;
-          left: -110px;
-
-          .icon {
-            background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
-          }
-        }
-      }
-
-      @keyframes iconMove {
-        100% {
-          opacity: 0;
-        }
-      }
-
-      @keyframes rotate1 {
-        0% {
-          transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
-        }
-
-        100% {
-          transform: translateX(0%) rotateX(72deg) rotateZ(0);
-        }
-      }
-
-      @keyframes rotate2 {
-        0% {
-          transform: translateX(0%) rotateX(70deg) rotateZ(0);
-        }
-
-        100% {
-          transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
-        }
-      }
-
-      @keyframes rotate3 {
-        0% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(0);
-        }
-
-        100% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
-        }
-      }
-
-      @keyframes rotate4 {
-        100% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(0);
-        }
-
-        0% {
-          transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
-        }
-      }
-
-      @keyframes ball {
-        100% {
-          offset-distance: 100%;
-        }
-
-        0% {
-          offset-distance: 0%;
-        }
-      }
-
-      @keyframes ball1 {
-        0% {
-          offset-distance: 100%;
-        }
-
-        100% {
-          offset-distance: 0%;
-        }
-      }
-    }
-  }
-
-  .right-box {
-    .dust-monitor {
-      display: flex;
-      justify-content: space-between;
-      padding: 0 20px;
-      margin-bottom: 20px;
-      margin-top: 15px;
-
-      .value {
-        width: 131px;
-        height: 44px;
-        background: url('/@/assets/images/vent/value-bg.png');
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .title {
-        text-align: center;
-        margin-bottom: 5px;
-      }
-
-      .value {
-        font-size: 16px;
-        font-family: 'douyuFont';
-        color: #3df5ff;
-      }
-    }
-
-    .gas-box {
-      height: 390px;
-      display: flex;
-      justify-content: space-between;
-      padding: 0 10px;
-
-      .gas-item {
-        position: relative;
-
-        .top {
-          height: 136px;
-          padding-top: 30px;
-
-          .value {
-            font-size: 26px;
-            font-family: 'douyuFont';
-            color: #3df5ff;
-            text-align: center;
-            margin-bottom: 5px;
-          }
-
-          .title {
-            width: 205px;
-            height: 48px;
-            text-align: center;
-            background: url('/@/assets/images/vent/plane.png') no-repeat;
-            background-size: contain;
-            background-position: bottom;
-          }
-
-          &::before {
-            position: absolute;
-            content: '';
-            width: 136px;
-            height: 101px;
-            left: 35px;
-            top: 15px;
-            background: url('/@/assets/images/vent/small-bg1.png') no-repeat;
-            background-size: cover;
-          }
-        }
-
-        .detail-box {
-          position: relative;
-          margin: 0 auto;
-          width: 184px;
-          height: calc(100% - 136px);
-          background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
-          background-size: cover;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-start;
-          align-items: center;
-          overflow-y: auto;
-          // padding: 50px 0 20px 0;
-
-          &::after {
-            position: absolute;
-            content: '';
-            left: 0px;
-            bottom: 0px;
-            width: 184px;
-            height: 31px;
-            background: url('/@/assets/images/vent/plane1.png') no-repeat center;
-            background-size: 100% 100%;
-            background-position: bottom;
-          }
-
-          .detail-item {
-            width: 100%;
-            height: 40px;
-            background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
-            // margin: 5px 0;
-            display: flex;
-            padding: 0 10px;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 30px;
-
-            .value {
-              font-size: 16px;
-              font-family: 'douyuFont';
-              color: #2bdcff;
-              text-align: center;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .monitor-title {
-    cursor: pointer;
-  }
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/index1.vue

@@ -1,385 +0,0 @@
-<template>
-  <div class="sensor-container">
-    <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
-      <a-tab-pane key="1" tab="实时预警">
-        <div class="box-bg table-box" style="margin-bottom: 10px">
-          <label style="color: #fff">设备类型：</label>
-          <MonitorTable
-            ref="SensorMonitorRef"
-            columnsType="alarm_history"
-            :dataSource="dataSource"
-            design-scope="alarm"
-            @select-row="getSelectRow"
-            :formConfi="formConfig"
-            title="传感器监测"
-          >
-            <template #filterCell="{ column, record }">
-              <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-                record.warnFlag == 0 ? '正常' : '报警'
-              }}</a-tag>
-              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
-                record.netStatus == '0' ? '断开' : '连接'
-              }}</a-tag>
-            </template>
-          </MonitorTable>
-        </div>
-        <div class="charts-box box-bg">
-          <BarAndLine
-            v-if="chartsColumns.length > 0"
-            :chartsColumnsType="selectData.deviceType"
-            xAxisPropType="readTime"
-            :dataSource="detailDataSource"
-            height="100%"
-            :chartsColumns="chartsColumns"
-            chartsType="detail"
-            :option="echartsOption"
-            @refresh="refreshEchatrs"
-          />
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="实时报警">
-        <div class="tab-item table-box box-bg padding-0">
-          <HistoryTable columns-type="modelsensor" device-type="modelsensor" @change="historyDataSourceChange" designScope="modelsensor-history" />
-        </div>
-        <div class="charts-box box-bg">
-          <BarAndLine
-            v-if="chartsColumns.length > 0"
-            :chartsColumnsType="selectData.deviceType"
-            xAxisPropType="gcreatetime"
-            :dataSource="historyDataSource"
-            height="100%"
-            :chartsColumns="chartsColumns"
-            chartsType="history"
-            :option="echartsOption1"
-            @refresh="refreshEchatrs"
-          />
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="3" tab="报警历史">
-        <div class="tab-item box-bg">
-          <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" :device-list-api="baseList" designScope="alarm-history" />
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-    <div class="title-text">
-      {{ selectData.strname }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import BarAndLine from '/@/components/chart/BarAndLine.vue';
-  import { onBeforeMount, ref, onMounted, onUnmounted, toRaw, reactive, nextTick } from 'vue';
-  import MonitorTable from '../comment/MonitorTable.vue';
-  import HistoryTable from '../comment/HistoryTable.vue';
-  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-  import { warningList } from './alarm.api';
-  import { formConfig } from './alarm.data';
-  import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
-
-  const SensorMonitorRef = ref();
-  const deviceBaseList = ref([]);
-  const activeKey = ref('1');
-  const deviceKind = ref('');
-  const deviceTypeOption = ref([]);
-  // 默认初始是第一行
-  const selectRowIndex = ref(0);
-  const dataSource = ref([]);
-  const detailDataSource = ref<any[]>([]);
-  const historyDataSource = ref<any[]>([]);
-  const chartsColumns = ref<any[]>([]);
-
-  const echartsOption = {
-    grid: {
-      top: '20%',
-      left: '10px',
-      right: '5px',
-      bottom: '5%',
-      containLabel: true,
-    },
-    toolbox: {
-      feature: {},
-    },
-  };
-
-  const selectData = reactive({
-    strname: '',
-    deviceType: '',
-    deviceID: '',
-  });
-
-  const tabChange = (activeKeyVal) => {
-    activeKey.value = activeKeyVal;
-  };
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  const getMonitor = (flag = false) => {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      timer = setTimeout(
-        async () => {
-          await getDataSource();
-          if (timer) {
-            timer = null;
-          }
-          getMonitor();
-        },
-        flag ? 0 : 1000
-      );
-    }
-  };
-
-  const getDataSource = async () => {
-    const res = await warningList({});
-    dataSource.value = res.list.records || [];
-    // if(dataSource.value.length > 0){
-    //   dataSource.value.map((data: any) => {
-    //     const readData = data.readData;
-    //     data = Object.assign(data, readData);
-    //     return data;
-    //   });
-    // }
-  };
-
-  const getSelectRow = (selectRow, index) => {
-    if (!selectRow) return;
-    selectRowIndex.value = index;
-    const baseData: any = deviceBaseList.value.find((baseData: any) => baseData.id === selectRow.deviceID);
-    Object.assign(selectData, selectRow, baseData);
-    if (selectData.deviceType) {
-      if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
-      }
-      if (activeKey.value === '1') detailDataSource.value = [];
-      if (activeKey.value === '2') historyDataSource.value = [];
-      handleChange(selectData.deviceType);
-    }
-  };
-
-  function handleChange(type) {
-    if (type === 'modelsensor_multi') {
-      chartsColumns.value = [
-        {
-          legend: '气压值',
-          seriesName: '(Pa)',
-          ymax: 50,
-          yname: 'Pa',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'pa',
-        },
-        {
-          legend: '温度',
-          seriesName: '(℃)',
-          ymax: 50,
-          yname: '℃',
-          linetype: 'bar',
-          yaxispos: 'right',
-          color: '#FC4327',
-          sort: 2,
-          xRotate: 0,
-          dataIndex: 'temperature',
-        },
-      ];
-    } else if (type === 'modelsensor_smoke') {
-      chartsColumns.value = [
-        {
-          legend: '烟雾浓度',
-          seriesName: '(%)',
-          ymax: 20,
-          yname: '%',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'windSpeed',
-        },
-      ];
-    } else if (type === 'modelsensor_speed') {
-      chartsColumns.value = [
-        {
-          legend: '风速',
-          seriesName: '(m/s)',
-          ymax: 20,
-          yname: 'm/s',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'windSpeed',
-        },
-      ];
-    } else if (type === 'modelsensor_gas') {
-      chartsColumns.value = [
-        {
-          legend: '甲烷',
-          seriesName: '(%)',
-          ymax: 20,
-          yname: '%',
-          linetype: 'bar',
-          yaxispos: 'left',
-          color: '#37BCF2',
-          sort: 1,
-          xRotate: 0,
-          dataIndex: 'windSpeed',
-        },
-      ];
-    }
-
-    console.log('[ type ] >', type, chartsColumns.value);
-  }
-
-  function refreshEchatrs() {
-    timer = null;
-    getMonitor();
-    console.log('echarts 刷新');
-  }
-
-  function historyDataSourceChange(dataSource) {
-    historyDataSource.value = dataSource;
-    if (historyDataSource.value.length > 0) handleChange(historyDataSource.value[0].gdevicetype);
-  }
-
-  onMounted(async () => {
-    getMonitor(true);
-  });
-
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
-</script>
-<style lang="less" scoped>
-  @import '/@/design/vent/color.less';
-  @import '/@/design/vent/modal.less';
-  .padding-0 {
-    padding: 10px 0 !important;
-  }
-  .sensor-container {
-    position: relative;
-    top: 65px;
-    padding: 10px;
-    z-index: 999;
-    max-height: calc(100vh - 150px);
-    .@{ventSpace}-tabs {
-      max-height: calc(100vh - 100px);
-      .tab-item {
-        max-height: calc(100vh - 170px);
-        overflow-y: auto;
-      }
-    }
-    .title-text {
-      position: absolute;
-      top: -14px;
-      left: 0;
-      width: 100%;
-      text-align: center;
-      color: #fff;
-    }
-    .table-box {
-      height: calc(60vh - 150px);
-      padding: 20px 10px;
-      overflow-y: auto;
-    }
-
-    .box-bg {
-      border: 1px solid #4d7ad855;
-      border-radius: 2px;
-      // background-color: #001d3055;
-      -webkit-backdrop-filter: blur(8px);
-      backdrop-filter: blur(8px);
-      box-shadow: 0 0 10px #5984e055 inset;
-      background-color: #00b3ff12;
-    }
-    .charts-box {
-      height: calc(40vh - 80px);
-      padding: 5px 10px;
-      margin-top: 10px;
-    }
-  }
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    height: 100%;
-  }
-  :deep(.@{ventSpace}-tabs-card) {
-    .@{ventSpace}-tabs-tab {
-      background: linear-gradient(#2cd1ff55, #1eb0ff55);
-      border-color: #74e9fe;
-      border-radius: 0%;
-      &:hover {
-        color: #64d5ff;
-      }
-    }
-    .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-      color: aqua;
-    }
-    .@{ventSpace}-tabs-nav::before {
-      border-color: #74e9fe;
-    }
-    .@{ventSpace}-picker,
-    .@{ventSpace}-select-selector {
-      width: 100% !important;
-      background: #00000017 !important;
-      border: 1px solid @vent-form-item-boder !important;
-      input,
-      .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-picker-suffix {
-        color: #fff !important;
-      }
-      .@{ventSpace}-select-selection-placeholder {
-        color: #b7b7b7 !important;
-      }
-    }
-    .@{ventSpace}-pagination-next,
-    .action,
-    .@{ventSpace}-select-arrow,
-    .@{ventSpace}-picker-separator {
-      color: #fff !important;
-    }
-    .@{ventSpace}-table-cell-row-hover {
-      background: #264d8833 !important;
-    }
-    .@{ventSpace}-table-row-selected {
-      background: #00c0a311 !important;
-      td {
-        background-color: #00000000 !important;
-      }
-    }
-    .@{ventSpace}-table-thead {
-      // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-      background: #3d9dd45d !important;
-
-      & > tr > th,
-      .@{ventSpace}-table-column-title {
-        // color: #70f9fc !important;
-        border-color: #84f2ff !important;
-        border-left: none !important;
-        border-right: none !important;
-        padding: 7px;
-      }
-    }
-
-    .@{ventSpace}-table-tbody {
-      tr > td {
-        padding: 12px;
-      }
-    }
-    .@{ventSpace}-table-tbody > tr:hover.@{ventSpace}-table-row > td {
-      background-color: #26648855 !important;
-    }
-
-    .jeecg-basic-table-row__striped {
-      // background: #97efff11 !important;
-      td {
-        background-color: #97efff11 !important;
-      }
-    }
-  }
-</style>

src/views/vent/monitorManager/alarmMonitor/warn/deviceWarn.vue

@@ -1,241 +0,0 @@
-<template>
-  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 设备监测预警 </customHeader>
-  <div class="alarm-modal">
-    <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-      style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
-    <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
-      <a-tab-pane key="1" tab="实时预警">
-        <div v-if="activeKey == '1'" class="box-bg table-box" style="margin-bottom: 10px">
-          <MonitorTable ref="SensorMonitorRef" :columns="levelColumns" :dataSource="dataSource" design-scope="alarm"
-            :isShowSelect="false" title="预警监测">
-            <template #filterCell="{ column, record }">
-              <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
-                record.warnFlag == 0 ? '正常' : '报警'
-              }}</a-tag>
-              <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == '0' ? '#f00' : 'green'">{{
-                record.netStatus == '0' ? '断开' : '连接'
-              }}</a-tag>
-            </template>
-          </MonitorTable>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="报警历史">
-        <div class="tab-item box-bg">
-          <AlarmHistoryTable v-if="activeKey == '2'" :columns="levelHisColumns" designScope="alarm-history" />
-        </div>
-      </a-tab-pane>
-    </a-tabs>
-  </div>
-
-</template>
-<script lang="ts" setup>
-import { onMounted, ref, defineEmits, reactive, onUnmounted, watch } from 'vue';
-import MonitorTable from '../../comment/MonitorTable.vue';
-import AlarmHistoryTable from '../alarmHistoryTable.vue';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-import { warningList } from '../alarm.api';
-import { levelColumns, levelHisColumns } from '../alarm.data';
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-
-// const props = defineProps({
-//   deviceId: { type: String },
-// });
-
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-// 默认初始是第一行
-const activeKey = ref('1');
-const dataSource = ref([]);
-
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-};
-let router = useRouter()
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(flag = false) {
-  if (Object.prototype.toString.call(timer) === '[object Null]') {
-    timer = setTimeout(
-      async () => {
-        await getDataSource();
-        if (timer) {
-          timer = null;
-        }
-        getMonitor();
-      },
-      flag ? 0 : 10000
-    );
-  }
-}
-
-//返回首页
-function getBack() {
-  router.push('/monitorChannel/monitor-alarm-home')
-}
-
-//设备预警监测列表
-async function getDataSource() {
-  const res = await warningList({ isok: 0 });
-  dataSource.value = res.list || [];
-}
-
-onMounted(async () => {
-  getMonitor(true);
-});
-onUnmounted(() => {
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-});
-</script>
-<style scoped lang="less">
-@import '/@/design/vent/color.less';
-@import '/@/design/vent/modal.less';
-
-.padding-0 {
-  padding: 10px 0 !important;
-}
-
-.alarm-modal {
-  position: relative;
-  padding: 80px 10px 15px 10px;
-  box-sizing: border-box;
-  z-index: 999;
-  max-height: calc(100vh - 150px);
-
-  .@{ventSpace}-tabs {
-    max-height: calc(100vh - 100px);
-
-    .tab-item {
-      height: calc(90vh - 152px);
-      // max-height: calc(100vh - 170px);
-      overflow-y: auto;
-    }
-  }
-
-  .title-text {
-    position: absolute;
-    top: -14px;
-    left: 0;
-    width: 100%;
-    text-align: center;
-    color: #fff;
-  }
-
-  .table-box {
-    height: calc(90vh - 152px);
-    padding: 20px 10px;
-    overflow-y: auto;
-  }
-
-  .box-bg {
-    border: 1px solid #4d7ad855;
-    border-radius: 2px;
-    // background-color: #001d3055;
-    // -webkit-backdrop-filter: blur(8px);
-    // backdrop-filter: blur(8px);
-    box-shadow: 0 0 10px #5984e055 inset;
-    // background-color: #00b3ff12;
-  }
-
-  .charts-box {
-    height: calc(40vh - 80px);
-    padding: 5px 10px;
-    margin-top: 10px;
-  }
-}
-
-:deep(.@{ventSpace}-tabs-tabpane-active) {
-  height: 100%;
-}
-
-:deep(.@{ventSpace}-tabs-card) {
-  .@{ventSpace}-tabs-tab {
-    background: linear-gradient(#2cd1ff55, #1eb0ff55);
-    border-color: #74e9fe;
-    border-radius: 0%;
-
-    &:hover {
-      color: #64d5ff;
-    }
-  }
-
-  .@{ventSpace}-tabs-tab.@{ventSpace}-tabs-tab-active .@{ventSpace}-tabs-tab-btn {
-    color: aqua;
-  }
-
-  .@{ventSpace}-tabs-nav::before {
-    border-color: #74e9fe;
-  }
-
-  .@{ventSpace}-picker,
-  .@{ventSpace}-select-selector {
-    width: 100% !important;
-    background: #00000017 !important;
-    border: 1px solid @vent-form-item-boder !important;
-
-    input,
-    .@{ventSpace}-select-selection-item,
-    .@{ventSpace}-picker-suffix {
-      color: #fff !important;
-    }
-
-    .@{ventSpace}-select-selection-placeholder {
-      color: #b7b7b7 !important;
-    }
-  }
-
-  .@{ventSpace}-pagination-next,
-  .action,
-  .@{ventSpace}-select-arrow,
-  .@{ventSpace}-picker-separator {
-    color: #fff !important;
-  }
-
-  .@{ventSpace}-table-cell-row-hover {
-    background: #264d8833 !important;
-  }
-
-  .@{ventSpace}-table-row-selected {
-    background: #00c0a311 !important;
-
-    td {
-      background-color: #00000000 !important;
-    }
-  }
-
-  .@{ventSpace}-table-thead {
-    // background: linear-gradient(#004a8655 0%, #004a86aa 10%) !important;
-    background: #3d9dd45d !important;
-
-    &>tr>th,
-    .@{ventSpace}-table-column-title {
-      // color: #70f9fc !important;
-      border-color: #84f2ff !important;
-      border-left: none !important;
-      border-right: none !important;
-      padding: 7px;
-    }
-  }
-
-  .@{ventSpace}-table-tbody {
-    tr>td {
-      padding: 12px;
-    }
-  }
-
-  .@{ventSpace}-table-tbody>tr:hover.@{ventSpace}-table-row>td {
-    background-color: #26648855 !important;
-  }
-
-  .jeecg-basic-table-row__striped {
-
-    // background: #97efff11 !important;
-    td {
-      background-color: #97efff11 !important;
-    }
-  }
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/warn/dustWarn.vue

@@ -1,448 +0,0 @@
-<template>
-    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 粉尘监测预警 </customHeader>
-    <div class="dustWarn">
-        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
-        <div class="alarm-menu">
-            <div class="card-btn">
-                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-                    @click="cardClick(ind, item)">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="warn">{{ item.warn }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="dust-content">
-            <div class="top-area">
-                <div :class="activeIndex == index ? 'top-box1' : 'top-box'" v-for="(item, index) in topAreaList"
-                    :key="index" @click="topAreaClick(index)">
-                    <div class="top-title">{{ item.title }}</div>
-                    <div class="top-content">
-                        <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
-                            <span class="item-label">{{ items.label }}</span>
-                            <span class="item-value">{{ items.value }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="bot-area">
-                <div class="title-t">
-                    <div class="text-t">粉尘信息状态监测</div>
-                </div>
-                <div class="echart-boxd">
-                    <echartLine :echartDataGq="echartDataFc" :maxY="maxY" :echartDw="echartDw" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted,onUnmounted } from 'vue'
-import { sysTypeWarnList, sysWarn } from '../common.api'
-import echartLine from '../common/echartLine.vue';
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-//左侧数据列表
-let menuList = reactive<any[]>([])
-//当前左侧激活菜单的索引
-let activeIndex1 = ref(0);
-//顶部区域激活选项
-let activeIndex = ref(0);
-//顶部区域数据
-let topAreaList = reactive<any[]>([]);
-let choiceData = reactive<any[]>([]);
-//粉尘图表数据
-let echartDataFc = reactive({
-    maxData: {
-        lengedData: '粉尘浓度(mg/m³)',
-        data: [],
-    },
-    xData: [],
-});
-let maxY = ref(0);
-let echartDw = ref('(mg/m³)');
-let router = useRouter()
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-        async () => {
-            await getSysWarnList(deviceID, 'dust');
-            if (timer) {
-                timer = null;
-            }
-            getMonitor(deviceID);
-        },
-        flag ? 0 : 1000
-    );
-}
-
-//返回首页
-function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home')
-}
-
-//获取左侧菜单列表
-async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'dust' })
-    if (res.length != 0) {
-        menuList.length = 0
-        res.forEach((el) => {
-            menuList.push({
-                name: el.systemname,
-                warn: '低风险',
-                deviceID: el.id,
-                strtype: el.strtype,
-            });
-        });
-        getMonitor(menuList[0].deviceID, true);
-    }
-}
-//获取预警详情弹窗右侧数据
-function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-        // listData.common = res;
-        topAreaList.length = 0;
-        echartDataFc.maxData.data.length = 0;
-        echartDataFc.xData.length = 0;
-        if (JSON.stringify(res) != '{}') {
-            res.dust.forEach((el) => {
-                topAreaList.push({
-                    title: el.strinstallpos,
-                    content: [
-                        { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
-                        { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
-                        { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
-                        { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
-                    ],
-                });
-            });
-            choiceData = res.dust;
-            if (choiceData[activeIndex.value]) {
-                choiceData[activeIndex.value].history.forEach((el) => {
-                    echartDataFc.maxData.data.push(el.dustval);
-                    echartDataFc.xData.push(el.time);
-                });
-                let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
-                    return acr > cur ? acr : cur;
-                });
-                maxY.value = formatRoundNum(max1 * 1.5);
-            } else {
-                activeIndex.value = 0;
-                choiceData[activeIndex.value].history.forEach((el) => {
-                    echartDataFc.maxData.data.push(el.dustval);
-                    echartDataFc.xData.push(el.time);
-                });
-                let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
-                    return acr > cur ? acr : cur;
-                });
-                maxY.value = formatRoundNum(max1 * 1.5);
-            }
-        }
-    });
-}
-//菜单选项切换
-function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    clearTimeout(timer);
-    getMonitor(item.deviceID, true);
-}
-
-//顶部区域选项切换
-function topAreaClick(index) {
-    activeIndex.value = index;
-    echartDataFc.maxData.data.length = 0;
-    echartDataFc.xData.length = 0;
-    choiceData[index].history.forEach((el) => {
-        echartDataFc.maxData.data.push(el.dustval);
-        echartDataFc.xData.push(el.time);
-    });
-}
-function formatRoundNum(num) {
-    let interger = Math.ceil(num);
-    let leng = String(interger).length;
-    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
-}
-
-onMounted(() => {
-    getMenuList()
-})
-onUnmounted(() => {
-    if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
-    }
-});
-</script>
-
-<style lang="less" scoped>
-.dustWarn {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-
-    .alarm-menu {
-        height: 100%;
-        width: 15%;
-
-        .card-btn {
-            width: 100%;
-            height: 100%;
-            overflow-y: auto;
-
-            .btn {
-                position: relative;
-                width: 81%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-            }
-
-            .btn1 {
-                position: relative;
-                width: 100%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-62%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-60%, 0);
-                }
-            }
-        }
-    }
-
-    .dust-content {
-        width: calc(85% - 10px);
-        height: 100%;
-        margin-left: 10px;
-        padding: 15px;
-        box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/border.png') no-repeat;
-        background-size: 100% 100%;
-
-        .top-area {
-            width: 100%;
-            height: 24%;
-            display: flex;
-            justify-content: flex-start;
-            align-items: flex-end;
-            margin-bottom: 10px;
-            overflow-x: auto;
-            transform: scaleY(-1);
-
-            .top-box {
-                position: relative;
-                width: 474px;
-                height: 88%;
-                flex-shrink: 0;
-                background: url('../../../../../assets/images/fire/fc-t.png') no-repeat center;
-                background-size: 100% 100%;
-                margin: 0px 20px;
-                transform: scaleY(-1);
-
-                .top-title {
-                    width: 80%;
-                    text-align: center;
-                    position: absolute;
-                    left: 50%;
-                    top: 8px;
-                    font-size: 14px;
-                    transform: translate(-50%, 0);
-                    color: #fff;
-                }
-
-                .top-content {
-                    position: absolute;
-                    top: 17%;
-                    left: 0;
-                    width: 100%;
-                    height: 83%;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    flex-wrap: wrap;
-                    cursor: pointer;
-
-                    .content-item {
-                        position: relative;
-                        width: 50%;
-                        height: 50%;
-                        background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                        background-size: 88% 50%;
-
-                        .item-label {
-                            position: absolute;
-                            left: 14%;
-                            top: 50%;
-                            transform: translate(0, -44%);
-                            font-size: 14px;
-                            color: #fff;
-                            // font-size: 12px;
-                        }
-
-                        .item-value {
-                            position: absolute;
-                            right: 14%;
-                            top: 50%;
-                            transform: translate(0, -38%);
-                            // font-size: 12px;
-                            font-size: 14px;
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                        }
-                    }
-                }
-            }
-
-            .top-box1 {
-                position: relative;
-                width: 474px;
-                height: 100%;
-                flex-shrink: 0;
-                background: url('../../../../../assets/images/fire/fc-t1.png') no-repeat center;
-                background-size: 100% 100%;
-                margin: 0px 20px;
-                transform: scaleY(-1);
-
-                .top-title {
-                    width: 80%;
-                    text-align: center;
-                    position: absolute;
-                    left: 50%;
-                    top: 8px;
-                    font-size: 14px;
-                    transform: translate(-50%, 0);
-                    color: #fff;
-                }
-
-                .top-content {
-                    position: absolute;
-                    top: 17%;
-                    left: 0;
-                    width: 100%;
-                    height: 83%;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    flex-wrap: wrap;
-                    padding-bottom: 20px;
-                    box-sizing: border-box;
-                    cursor: pointer;
-
-                    .content-item {
-                        position: relative;
-                        width: 50%;
-                        height: 50%;
-                        background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                        background-size: 88% 50%;
-
-                        .item-label {
-                            position: absolute;
-                            left: 14%;
-                            top: 50%;
-                            transform: translate(0, -44%);
-                            color: #fff;
-                            font-size: 14px;
-                            // font-size: 12px;
-                        }
-
-                        .item-value {
-                            position: absolute;
-                            right: 14%;
-                            top: 50%;
-                            transform: translate(0, -38%);
-                            // font-size: 12px;
-                            font-size: 14px;
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                        }
-                    }
-                }
-            }
-        }
-
-        .bot-area {
-            height: calc(76% - 10px);
-            padding: 10px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-
-            .title-t {
-                height: 30px;
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .text-t {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
-                }
-            }
-
-            .echart-boxd {
-                width: 100%;
-                height: calc(100% - 40px);
-            }
-        }
-
-    }
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/warn/fireWarn.vue

@@ -1,343 +0,0 @@
-<template>
-    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 火灾监测预警 </customHeader>
-    <div class="fireWarn">
-        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
-        <div class="alarm-menu">
-            <div class="type-btn">
-                <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuList" :key="index"
-                    @click="btnClick(index)">
-                    {{ item.name }}
-                </div>
-            </div>
-            <div class="card-btn">
-                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-                    @click="cardClick(ind, item)">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="warn">{{ item.warn }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="fire-content">
-            <component :is="componentName[currentLoad]" :listData="listData" :strType="strType"></component>
-        </div>
-
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
-import { typeMenuList, componentName } from '../common.data'
-import { sysTypeWarnList, sysWarn } from '../common.api'
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-//当前加载组件
-let currentLoad = ref('')
-//内外因火灾激活索引
-let activeIndex = ref(0);
-//当前激活菜单的索引
-let activeIndex1 = ref(0);
-let menuList = reactive<any[]>([]); //左侧菜单列表
-let menuList1 = reactive({
-    external: [],
-    internal: [],
-});
-//详情数据
-let listData = reactive({
-    common: {},
-    bundletube: [],
-    fiber: [],
-    fire: [],
-    co:[],
-    smoke: [],
-    spray: [],
-    temperature: [],
-}); //详情数据
-let strType = ref(''); //火灾外因-区别工作面和煤层
-let router = useRouter()
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-        async () => {
-            await getSysWarnList(deviceID, 'fire');
-            if (timer) {
-                timer = null;
-            }
-            getMonitor(deviceID);
-        },
-        flag ? 0 : 1000
-    );
-}
-
-//返回首页
-function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home')
-}
-
-//获取左侧菜单列表
-async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'fire' })
-    console.log(res, '火灾左侧菜单列表-------')
-    if (res.length != 0) {
-        menuList.length = 0
-        menuList1.external = res.external;
-        menuList1.internal = res.internal;
-        menuList1.internal.forEach((el) => {
-            menuList.push({
-                name: el.systemname,
-                warn: '低风险',
-                type: 'on',
-                deviceID: el.id,
-                strtype: el.strtype,
-            });
-        });
-        getMonitor(menuList[0].deviceID, true);
-    }
-}
-
-//获取预警详情弹窗右侧数据
-function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-        listData.bundletube = res.bundletube;
-        listData.fiber = res.fiber;
-        listData.fire = res.fire;
-        listData.co=res.co;
-        listData.smoke = res.smoke;
-        listData.spray = res.spray;
-        listData.temperature = res.temperature;
-        loadZj();
-    });
-}
-
-
-//内外因火灾、预警指标选项切换
-function btnClick(ind) {
-    activeIndex.value = ind;
-    switch (ind) {
-        case 0:
-            activeIndex1.value = 0;
-            menuList.length = 0;
-            currentLoad.value = '';
-            menuList1.internal.forEach((el) => {
-                menuList.push({
-                    name: el.systemname,
-                    warn: '低风险',
-                    type: 'on',
-                    deviceID: el.id,
-                    strtype: el.strtype,
-                });
-            });
-            clearTimeout(timer);
-            getClearList();
-            getMonitor(menuList[0].deviceID, true);
-            break;
-        case 1:
-            activeIndex1.value = 0;
-            menuList.length = 0;
-            currentLoad.value = '';
-            if (menuList1.external.length != 0) {
-                menuList1.external.forEach((el) => {
-                    menuList.push({
-                        name: el.systemname,
-                        warn: '低风险',
-                        type: 'out',
-                        deviceID: el.id,
-                        strtype: el.strtype,
-                    });
-                });
-                clearTimeout(timer);
-                getClearList();
-                getMonitor(menuList[0].deviceID, true);
-                strType.value = menuList[0].strtype;
-            } else {
-                menuList.length = 0;
-                clearTimeout(timer);
-                currentLoad.value = '';
-            }
-            break;
-        case 2:
-            activeIndex1.value = 0;
-            menuList.length = 0;
-            currentLoad.value = 'warnTargetFire';
-            break;
-    }
-}
-//菜单选项切换
-function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    strType.value = item.strtype;
-    clearTimeout(timer);
-    getClearList();
-    currentLoad.value = '';
-    getMonitor(item.deviceID, true);
-}
-//加载组件
-function loadZj() {
-    if (!activeIndex.value && listData.fiber.length != 0 && listData.bundletube.length != 0) {
-        currentLoad.value = 'fireWork';
-    } else if (!activeIndex.value && listData.bundletube.length != 0) {
-        currentLoad.value = 'closeWall';
-    } else if (activeIndex.value && activeIndex.value!=2) {
-        currentLoad.value = 'mainWell';
-    }else if(activeIndex.value==2){
-        currentLoad.value = 'warnTargetFire';
-    } else {
-        currentLoad.value = '';
-    }
-}
-//清空数据
-function getClearList() {
-    listData.common = {};
-    listData.bundletube.length = 0;
-    listData.fiber.length = 0;
-    listData.fire.length = 0;
-    listData.co.length=0;
-    listData.smoke.length = 0;
-    listData.spray.length = 0;
-    listData.temperature.length = 0;
-}
-
-onMounted(() => {
-    getMenuList()
-})
-onUnmounted(() => {
-    if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
-    }
-});
-</script>
-
-<style lang="less" scoped>
-.fireWarn {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-
-    .alarm-menu {
-        height: 100%;
-        width: 15%;
-
-        .type-btn {
-            width: 100%;
-            height: 28px;
-            line-height: 28px;
-            border: 1px solid #0058ee;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-
-            .btn {
-                width: 33%;
-                height: 100%;
-                font-size: 14px;
-                text-align: center;
-                color: #fff;
-                cursor: pointer;
-            }
-
-            .btn1 {
-                width: 33%;
-                height: 100%;
-                font-size: 14px;
-                color: #fff;
-                text-align: center;
-                border-radius: 2px;
-                background: #0058ee;
-                cursor: pointer;
-            }
-        }
-
-        .card-btn {
-            width: 100%;
-            height: calc(100% - 48px);
-            overflow-y: auto;
-
-            .btn {
-                position: relative;
-                width: 81%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-            }
-
-            .btn1 {
-                position: relative;
-                width: 100%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-62%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-60%, 0);
-                }
-            }
-        }
-    }
-
-    .fire-content {
-        width: calc(85% - 10px);
-        height: 100%;
-        margin-left: 10px;
-        background: url('../../../../../assets/images/fire/border.png') no-repeat;
-        background-size: 100% 100%;
-    }
-
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/warn/gasWarn.vue

@@ -1,693 +0,0 @@
-<template>
-    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 瓦斯监测预警 </customHeader>
-    <div class="gasWarn">
-        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
-        <div class="alarm-menu">
-            <div class="type-btn">
-                <div :class="activeIndex == index ? 'btn1' : 'btn'" v-for="(item, index) in typeMenuListGas"
-                    :key="index" @click="btnClick(index)">
-                    {{ item.name }}
-                </div>
-            </div>
-            <div class="card-btn">
-                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-                    @click="cardClick(ind, item)">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="warn">{{ item.warn }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="gas-content">
-            <div style="width:100%;height:100%" v-if="isShow">
-                <div class="top-area" v-if="topAreaListWs.length != 0">
-                    <div class="title-t">
-                        <div class="text-t">瓦斯抽采泵信息</div>
-                    </div>
-                    <div class="content-t">
-                        <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
-                            <div class="box-label">{{ item.label }}</div>
-                            <div class="box-values">
-                                <div class="value-b" v-for="(items, ind) in item.list" :key="ind">
-                                    <span>{{ `${items.name} : ` }}</span>
-                                    <span :class="{
-                                        'box-value': items.val == 0 && items.name == '报警状态',
-                                        'box-value1': items.val == 101 && items.name == '报警状态',
-                                        'box-value2': items.val == 102 && items.name == '报警状态',
-                                        'box-value3': items.val == 103 && items.name == '报警状态',
-                                        'box-value4': items.val == 104 && items.name == '报警状态',
-                                        'box-value5': (items.val == 201 || item.val == 1001) && items.name == '报警状态',
-                                    }">{{
-                                        items.val == 0 && items.name == '报警状态'
-                                            ? '正常'
-                                            : items.val == 101 && items.name == '报警状态'
-                                                ? '较低风险'
-                                                : items.val == 102 && items.name == '报警状态'
-                                                    ? '低风险'
-                                                    : items.val == 103 && items.name == '报警状态'
-                                                        ? '中风险'
-                                                        : items.val == 104 && items.name == '报警状态'
-                                                            ? '高风险'
-                                                            : items.val == 201 && items.name == '报警状态'
-                                                                ? '报警' : items.val == 1001 && items.name == '报警状态' ? '网络断开'
-                                                                    : items.val
-                                    }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
-                    <div class="title-b">
-                        <div class="text-b">安全监控测点信息</div>
-                    </div>
-                    <div class="content-b">
-                        <div class="card-b" v-for="(item, index) in cardListWs" :key="index">
-                            <div class="item-l">
-                                <div class="label-l">{{ item.label }}</div>
-                                <div class="value-l">{{ `${item.value}%` }}</div>
-                            </div>
-                            <div class="item-r">
-                                <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
-                                    <span>{{ `${items.label} : ` }}</span>
-                                    <span :class="{
-                                        'status-f': items.value == 1,
-                                        'status-l': items.value == 0,
-                                    }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div style="width:100%;height:100%" v-else>
-                <warnTargetGas></warnTargetGas>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
-import { sysTypeWarnList, sysWarn } from '../common.api'
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-import warnTargetGas from '../common/warnTargetGas.vue'
-import { typeMenuListGas } from '../common.data'
-
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-//当前左侧激活菜单的索引
-let activeIndex1 = ref(0);
-//左侧数据列表
-let menuList = reactive<any[]>([])
-//瓦斯顶部区域数据
-let topAreaListWs = reactive<any[]>([]);
-//瓦斯监控列表数据
-let cardListWs = reactive<any[]>([]);
-let router = useRouter()
-//监测/指标激活索引
-let activeIndex = ref(0);
-let isShow = ref(true)
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-        async () => {
-            await getSysWarnList(deviceID, 'gas');
-            if (timer) {
-                timer = null;
-            }
-            getMonitor(deviceID);
-        },
-        flag ? 0 : 1000
-    );
-}
-
-//返回首页
-function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home')
-}
-
-//获取预警详情弹窗右侧数据
-function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-        // listData.common = res;
-        topAreaListWs.length = 0;
-        cardListWs.length = 0;
-        if (JSON.stringify(res) != '{}') {
-            res.pump.forEach((v) => {
-                topAreaListWs.push({
-                    label: v.strinstallpos || '--',
-                    list: [
-                        // { name: '抽采泵流量', val: v.readData.FlowSensor_InputFlux || 0 },
-                        { name: '报警状态', val: v.warnLevel || 0 },
-                        { name: '输入管道内一氧化碳(ppm)', val: v.readData.coVal && v.readData.coVal != '0' ? v.readData.coVal : '-' },
-                        { name: '管路出口处瓦斯(%CH4)', val: v.readData.gas1 && v.readData.gas1 != '0' ? v.readData.gas1 : '-' }, //v.readData.gas1
-                        { name: '泵站内瓦斯(%CH4)', val: v.readData.gas2 && v.readData.gas2 != '0' ? v.readData.gas2 : '-' }, //v.readData.gas2
-                        { name: '输入管道内瓦斯(%CH4)', val: v.readData.gas3 && v.readData.gas3 != '0' ? v.readData.gas3 : '-' }, //v.readData.gas3
-                        { name: '管道输出瓦斯(%CH4)', val: v.readData.gas4 && v.readData.gas4 != '0' ? v.readData.gas4 : '-' }, //v.readData.gas4
-                        { name: '输入管道内工混流量(m³/min)', val: v.readData.mixedTraffic && v.readData.mixedTraffic != '0' ? v.readData.mixedTraffic : '-' }, //v.readData.mixedTraffic
-                        {
-                            name: '输入管道内标况流量(m³/min)',
-                            val: v.readData.standardTraffic && v.readData.standardTraffic != '0' ? v.readData.standardTraffic : '-',
-                        }, //v.readData.standardTraffic
-                        { name: '瓦斯抽放量(m³)', val: v.readData.totalGasDrainage && v.readData.totalGasDrainage != '0' ? v.readData.totalGasDrainage : '-' },
-                    ],
-                });
-            });
-
-            res.gas.forEach((el) => {
-                el.strinstallpos = el.strinstallpos.indexOf('&') == -1 ? el.strinstallpos : el.strinstallpos.substring(0, el.strinstallpos.indexOf('&'));
-                cardListWs.push({
-                    label: '甲烷',
-                    // value: el.readData.gasC || '--',
-                    value: 0,
-                    listR: [
-                        { id: 0, label: '测点类型', value: '瓦斯' },
-                        { id: 1, label: '测点位置', value: el.strinstallpos || '--' },
-                        { id: 2, label: '数据时间', value: el.readData.datetime || '--' },
-                        { id: 3, label: '测点状态', value: el.warnFlag },
-                    ],
-                });
-            });
-        }
-    });
-}
-
-//获取左侧菜单列表
-async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'gas' })
-    if (res.length != 0) {
-        menuList.length = 0
-        res.forEach((el) => {
-            menuList.push({
-                name: el.systemname,
-                warn: '低风险',
-                deviceID: el.id,
-                strtype: el.strtype,
-            });
-        });
-        getMonitor(menuList[0].deviceID, true);
-    }
-}
-
-//监测/预警指标选项切换
-function btnClick(ind) {
-    activeIndex.value = ind;
-    clearTimeout(timer);
-    switch (ind) {
-        case 0:
-            activeIndex1.value = 0;
-            isShow.value = true
-            break;
-        case 1:
-            activeIndex1.value = 0;
-            isShow.value = false
-            break;
-    }
-}
-
-//菜单选项切换
-function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    clearTimeout(timer);
-    getMonitor(item.deviceID, true);
-}
-
-onMounted(() => {
-    getMenuList()
-})
-onUnmounted(() => {
-    if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
-    }
-});
-
-</script>
-
-<style lang="less" scoped>
-.gasWarn {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-
-    .alarm-menu {
-        height: 100%;
-        width: 15%;
-
-        .type-btn {
-            width: 100%;
-            height: 28px;
-            line-height: 28px;
-            border: 1px solid #0058ee;
-            margin-bottom: 20px;
-            border-radius: 5px;
-            box-sizing: border-box;
-            display: flex;
-            justify-content: space-between;
-
-            .btn {
-                width: 50%;
-                height: 100%;
-                font-size: 14px;
-                text-align: center;
-                color: #fff;
-                cursor: pointer;
-            }
-
-            .btn1 {
-                width: 50%;
-                height: 100%;
-                font-size: 14px;
-                color: #fff;
-                text-align: center;
-                border-radius: 2px;
-                background: #0058ee;
-                cursor: pointer;
-            }
-        }
-
-        .card-btn {
-            width: 100%;
-            height: calc(100% - 48px);
-            overflow-y: auto;
-
-            .btn {
-                position: relative;
-                width: 81%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-            }
-
-            .btn1 {
-                position: relative;
-                width: 100%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-62%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-60%, 0);
-                }
-            }
-        }
-    }
-
-    .gas-content {
-        position: relative;
-        width: calc(85% - 10px);
-        height: 100%;
-        margin-left: 10px;
-        padding: 15px;
-        background: url('../../../../../assets/images/fire/border.png') no-repeat;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-
-        .top-area {
-            height: 356px;
-            margin-bottom: 10px;
-            padding: 10px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-
-            .title-t {
-                height: 30px;
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .text-t {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
-                }
-            }
-
-            .content-t {
-                width: 100%;
-                height: 276px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 0px 10px;
-                box-sizing: border-box;
-
-                .top-box {
-                    position: relative;
-                    width: 724px;
-                    height: 100%;
-                    background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .box-label {
-                        position: absolute;
-                        left: 50%;
-                        top: 198px;
-                        transform: translate(-50%, 0);
-                        width: 80%;
-                        font-family: 'douyuFont';
-                        font-size: 16px;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        word-wrap: break-word;
-                        color: #fff;
-                    }
-
-                    .box-values {
-                        position: absolute;
-                        left: 50%;
-                        top: 26px;
-                        transform: translate(-50%, 0);
-                        width: 84%;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        flex-wrap: wrap;
-
-                        .value-b {
-                            width: calc(50% - 10px);
-                            height: 25px;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            color: #fff;
-                            font-size: 14px;
-
-                            span {
-                                font-size: 14px;
-
-                                &:last-child {
-                                    font-family: 'douyuFont';
-                                    color: rgb(0, 242, 255);
-                                }
-                            }
-
-                            .box-value {
-                                color: rgb(145, 230, 9) !important;
-                            }
-
-                            .box-value1 {
-                                color: rgb(0, 242, 255) !important;
-                            }
-
-                            .box-value2 {
-                                color: #ffff35 !important;
-                            }
-
-                            .box-value3 {
-                                color: #ffbe69 !important;
-                            }
-
-                            .box-value4 {
-                                color: #ff6f00 !important;
-                            }
-
-                            .box-value5 {
-                                color: #ff0000 !important;
-                            }
-                        }
-                    }
-                }
-            }
-
-        }
-
-        .bot-area {
-            height: calc(100% - 356px);
-            padding: 10px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-
-            .title-b {
-                height: 30px;
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .text-b {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
-                }
-            }
-
-            .content-b {
-                height: calc(100% - 40px);
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-wrap: wrap;
-                overflow-y: auto;
-
-                .card-b {
-                    position: relative;
-                    width: 30%;
-                    height: 128px;
-                    margin: 0px 15px 15px 15px;
-                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .item-l {
-                        position: absolute;
-                        left: 32px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        width: 89px;
-                        height: 98px;
-                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-                        .label-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 7px;
-                            color: #fff;
-                            font-size: 14px;
-                            transform: translate(-50%, 0);
-                        }
-
-                        .value-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 50px;
-                            transform: translate(-50%, 0);
-                            font-family: 'douyuFont';
-                            font-size: 16px;
-                            color: #3df6ff;
-                        }
-                    }
-
-                    .item-r {
-                        position: absolute;
-                        left: 132px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-                                color: #fff;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        .bot-area1 {
-            height: 100%;
-            padding: 10px 15px 0px 15px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-
-            .title-b {
-                height: 30px;
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .text-b {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
-                }
-            }
-
-            .content-b {
-                width: 100%;
-                height: calc(100% - 40px);
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-wrap: wrap;
-                overflow-y: auto;
-
-                .card-b {
-                    position: relative;
-                    width: 30%;
-                    height: 128px;
-                    margin: 0px 15px 15px 15px;
-                    background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
-                    background-size: 100% 100%;
-
-                    .item-l {
-                        position: absolute;
-                        left: 32px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        width: 89px;
-                        height: 98px;
-                        background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-                        .label-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 7px;
-                            font-size: 14px;
-                            color: #fff;
-                            transform: translate(-50%, 0);
-                        }
-
-                        .value-l {
-                            position: absolute;
-                            left: 50%;
-                            top: 50px;
-                            transform: translate(-50%, 0);
-                            font-family: 'douyuFont';
-                            font-size: 16px;
-                            color: #3df6ff;
-                        }
-                    }
-
-                    .item-r {
-                        position: absolute;
-                        left: 132px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        height: 128px;
-                        padding: 5px 0px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        box-sizing: border-box;
-
-                        .content-r {
-                            display: flex;
-
-                            span {
-                                font-size: 14px;
-                                color: #fff;
-
-                                &:first-child {
-                                    display: inline-block;
-                                    width: 68px;
-                                }
-
-                                &:last-child {
-                                    display: inline-block;
-                                    width: calc(100% - 68px);
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

@@ -1,531 +0,0 @@
-<template>
-    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
-    <div class="ventilateWarn">
-        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-            style="position: absolute;left:15px;top:15px;color: #fff;" @click="getBack">返回</a-button>
-        <div class="alarm-menu">
-            <div class="card-btn">
-                <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
-                    @click="cardClick(ind, item)">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="warn">{{ item.warn }}</div>
-                </div>
-            </div>
-        </div>
-        <div class="dustPage">
-            <div class="top-area">
-                <div class="top-box" v-for="(item, index) in topAreaList" :key="index">
-                    <div class="top-title">{{ item.title }}</div>
-                    <div class="top-content">
-                        <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
-                            <span class="item-label">{{ items.label }}</span>
-                            <span :class="{
-                                'item-value1': items.value == 0,
-                                'item-value2': items.value == 101,
-                                'item-value3': items.value == 102,
-                                'item-value4': items.value == 103,
-                                'item-value5': items.value == 104,
-                                'item-value6': items.value == 201,
-                                'item-value': items.value != 0 && items.value != 101 && items.value != 102 && items.value != 103 && items.value != 104 && items.value != 201,
-
-                            }">{{ items.value == 0 ? '正常' : items.value == 101 ? '较低风险' : items.value == 102 ? '低风险' :
-                                items.value ==
-                                    103 ?
-                                    '中风险' : items.value == 104 ? '高风险' : items.value == 201 ? '报警' : items.value }}</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="center-area">
-                <div class="center-t">
-                    <div class="t-box" v-for="(item, index) in centerAreaListT1" :key="index">
-                        <div class="box-label">{{ item.label }}</div>
-                    </div>
-                </div>
-                <div class="center-b">
-                    <div class="b-box" v-for="(item, index) in centerAreaListB1" :key="index">
-                        <div class="box-label">{{ item.content }}</div>
-                    </div>
-                </div>
-            </div>
-            <div class="bot-area">
-                <div class="title-t">
-                    <div class="text-t">通风信息状态监测</div>
-                </div>
-                <div class="echart-boxd">
-                    <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
-                </div>
-
-            </div>
-        </div>
-    </div>
-
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, onMounted, onUnmounted } from 'vue';
-import { sysTypeWarnList, sysWarn } from '../common.api'
-import { centerAreaListT1, centerAreaListB1 } from '../common.data';
-import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-import { useRouter } from 'vue-router';
-import echartLine from '../common/echartLine.vue';
-import CustomHeader from '/@/components/vent/customHeader.vue';
-
-const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-//左侧数据列表
-let menuList = reactive<any[]>([])
-//当前左侧激活菜单的索引
-let activeIndex1 = ref(0);
-let maxY = ref(0)
-let echartDw = ref('(m³/min)')
-//报警区域数据
-let topAreaList = reactive<any[]>([]);
-//通风图表数据
-const echartDataFc1 = reactive({
-    maxData: {
-        lengedData: '进风量',
-        data: []
-    },
-    minData: {
-        lengedData: '回风量',
-        data: []
-    },
-    aveValue: {
-        lengedData: '需风量',
-        data: []
-    },
-    xData: [],
-});
-let router = useRouter()
-
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-        async () => {
-            await getSysWarnList(deviceID, 'vent');
-            if (timer) {
-                timer = null;
-            }
-            getMonitor(deviceID);
-        },
-        flag ? 0 : 1000
-    );
-}
-//返回首页
-function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home')
-}
-//菜单选项切换
-function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    clearTimeout(timer);
-    getMonitor(item.deviceID, true);
-}
-//获取左侧数据列表
-async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'vent' })
-    console.log(res, '通风预警监测左侧列表数据-------------')
-    if (res.length != 0) {
-        menuList.length = 0
-        res.forEach((el) => {
-            menuList.push({
-                name: el.deviceName,
-                warn: '低风险',
-                deviceID: el.deviceID,
-                strtype: el.deviceType,
-            });
-        });
-        getMonitor(menuList[0].deviceID, true);
-    }
-}
-function formatRoundNum(num) {
-    let interger = Math.ceil(num)
-    let leng = String(interger).length
-    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
-}
-//获取预警详情弹窗右侧数据
-function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-        echartDataFc1.maxData.data.length = 0;
-        echartDataFc1.minData.data.length = 0;
-        echartDataFc1.aveValue.data.length = 0;
-        echartDataFc1.xData.length = 0;
-        topAreaList.length = 0;
-        if (JSON.stringify(res) != '{}') {
-            if (res.warnDevices.length != 0) {
-                res.warnDevices.forEach((el) => {
-                    topAreaList.push({
-                        title: el.typeName,
-                        content: [
-                            { ids: 0, label: '设备类型', value: '工作面风量' },
-                            {
-                                ids: 1,
-                                label: '报警等级',
-                                value: el.datalist[0].warnLevel || 0,
-                            },
-                            { ids: 2, label: '报警描述', value: el.datalist[0].warnDes || '--' },
-                        ],
-                    });
-                });
-            } else {
-                topAreaList.push({
-                    title: '工作面',
-                    content: [
-                        { ids: 0, label: '设备类型', value: '工作面风量' },
-                        {
-                            ids: 1,
-                            label: '报警等级',
-                            value: res.warnLevel || '正常',
-                        },
-                        { ids: 2, label: '报警描述', value: '--' },
-                    ],
-                });
-            }
-
-            centerAreaListB1[0].content = res.jin || '--';
-            centerAreaListB1[1].content = res.hui || '--';
-            centerAreaListB1[2].content = res.xufengliang || '--';
-
-            if (res.history.length != 0) {
-                res.history.forEach((v) => {
-                    echartDataFc1.maxData.data.push(parseFloat(v.jin));
-                    echartDataFc1.minData.data.push(parseFloat(v.hui));
-                    if (centerAreaListB1[2].content && centerAreaListB1[2].content != '--') {
-                        echartDataFc1.aveValue.data.push(centerAreaListB1[2].content);
-                    } else {
-                        echartDataFc1.aveValue.data.push(0);
-                    }
-
-                    echartDataFc1.xData.push(v.time);
-                });
-            }
-
-            let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
-                return acr > cur ? acr : cur
-            })
-            let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
-                return acr1 > cur1 ? acr1 : cur1
-            })
-            maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2)
-        }
-    });
-}
-
-onMounted(() => {
-    getMenuList()
-})
-onUnmounted(() => {
-    if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
-    }
-});
-</script>
-
-<style lang="less" scoped>
-.ventilateWarn {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-
-    .alarm-menu {
-        height: 100%;
-        width: 15%;
-
-        .card-btn {
-            width: 100%;
-            height: 100%;
-            overflow-y: auto;
-
-            .btn {
-                position: relative;
-                width: 81%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-50%, 0);
-                }
-            }
-
-            .btn1 {
-                position: relative;
-                width: 100%;
-                height: 14%;
-                margin-bottom: 10%;
-                font-family: 'douyuFont';
-                background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-                background-size: 100% 100%;
-                cursor: pointer;
-
-                .text {
-                    width: 80%;
-                    position: absolute;
-                    left: 50%;
-                    top: 28px;
-                    font-size: 16px;
-                    color: #01fefc;
-                    text-align: center;
-                    transform: translate(-62%, 0);
-                }
-
-                .warn {
-                    width: 100%;
-                    position: absolute;
-                    left: 50%;
-                    bottom: 14px;
-                    font-size: 14px;
-                    color: #fff;
-                    text-align: center;
-                    transform: translate(-60%, 0);
-                }
-            }
-        }
-    }
-
-    .dustPage {
-        width: calc(85% - 10px);
-        height: 100%;
-        margin-left: 10px;
-        padding: 15px;
-        background: url('../../../../../assets/images/fire/border.png') no-repeat;
-        background-size: 100% 100%;
-        box-sizing: border-box;
-
-        .top-area {
-            height: 24%;
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 10px;
-
-            .top-box {
-                position: relative;
-                width: 32%;
-                height: 88%;
-                background: url('../../../../../assets/images/fire/fc-t.png') no-repeat;
-                background-size: 100% 100%;
-
-                .top-title {
-                    position: absolute;
-                    left: 50%;
-                    top: 8px;
-                    font-size: 14px;
-                    color: #fff;
-                    transform: translate(-50%, 0);
-                }
-
-                .top-content {
-                    position: absolute;
-                    top: 20%;
-                    left: 0;
-                    width: 100%;
-                    height: 80%;
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    flex-wrap: wrap;
-                    cursor: pointer;
-
-                    .content-item {
-                        position: relative;
-                        width: 50%;
-                        height: 50%;
-                        font-size: 14px;
-                        background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-                        background-size: 82% 54%;
-
-                        .item-label {
-                            position: absolute;
-                            left: 16%;
-                            top: 50%;
-                            color: #fff;
-                            transform: translate(0, -44%);
-                        }
-
-                        .item-value {
-                            position: absolute;
-                            right: 16%;
-                            top: 50%;
-                            transform: translate(0, -38%);
-                            font-family: 'douyuFont';
-                            color: #3df6ff;
-                        }
-
-                        .item-value1 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: rgb(145, 230, 9);
-                        }
-
-                        .item-value2 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: rgb(0, 242, 255);
-                        }
-
-                        .item-value3 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ffff35;
-                        }
-
-                        .item-value4 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ffbe69;
-                        }
-
-                        .item-value5 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ff6f00;
-                        }
-
-                        .item-value6 {
-                            position: absolute;
-                            right: 21%;
-                            top: 50%;
-                            transform: translate(0, -32%);
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #ff0000;
-                        }
-                    }
-                }
-            }
-        }
-
-        .center-area {
-            height: 34%;
-            margin-bottom: 20px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-            background-size: 100% 100%;
-
-            .center-t {
-                height: 50%;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                background: url('../../../../../assets/images/fire/dz.png') no-repeat;
-                background-size: 100% 100%;
-
-                .t-box {
-                    width: 14%;
-                    height: 75%;
-                    background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
-                    background-size: 100% 100%;
-
-                    .box-label {
-                        font-size: 16px;
-                        color: #06edcd;
-                        text-align: center;
-                    }
-                }
-            }
-
-            .center-b {
-                height: 50%;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-
-                .b-box {
-                    width: 14%;
-                    height: 75%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: center;
-
-                    .box-label {
-                        width: 78%;
-                        height: 44%;
-                        display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        color: #3df6ff;
-                        font-family: 'douyuFont';
-                        background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
-                        background-size: 100% 100%;
-                    }
-                }
-            }
-        }
-
-        .bot-area {
-            height: calc(100% - 58% - 30px);
-            padding: 10px 15px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-            background-size: 100% 100%;
-            box-sizing: border-box;
-
-            .title-t {
-                height: 30px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .text-t {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
-                }
-            }
-
-            .echart-boxd {
-                width: 100%;
-                height: calc(100% - 30px);
-            }
-
-        }
-
-    }
-
-}
-</style>