水文监测页面开发

src/views/vent/home/configurable/components/detail/TimelineListNew.vue

@@ -4,7 +4,7 @@
     <div class="left-section">
       <div class="warnBg"></div>
       <div class="warnInfo">
-        <div>{{ 0 }}</div>
+        <div>{{ sum }}</div>
         <div>报警数</div>
       </div>
     </div>
@@ -23,7 +23,8 @@
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
+import { computed } from 'vue';
+const props = withDefaults(
   defineProps<{
     listConfig: {
       value: string;
@@ -36,6 +37,11 @@ withDefaults(
     listConfig: () => [],
   }
 );
+const sum = computed(() => {
+  return props.listConfig.reduce((total, item) => {
+    return total + Number(item.value);
+  }, 0);
+});
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';

src/views/vent/home/configurable/configurable.data.ts

@@ -1001,7 +1001,7 @@ export const testConfigDustGreen: Config[] = [
           value: '',
         },
       },
-     background: {
+      background: {
         show: false,
         type: 'video',
         link: '',
@@ -1021,7 +1021,7 @@ export const testConfigDustGreen: Config[] = [
       },
       board: [],
       chart: [],
-       gallery: [
+      gallery: [
         {
           type: 'D',
           readFrom: 'dustManageInfo',
@@ -1094,9 +1094,9 @@ export const testConfigDustGreen: Config[] = [
   {
     deviceType: 'dustDustGraph',
     moduleName: '综放工作面粉尘浓度',
-     pageType: 'dust-green',
+    pageType: 'dust-green',
     moduleData: {
-     header: {
+      header: {
         show: true,
         readFrom: '',
         selector: {
@@ -1187,7 +1187,7 @@ export const testConfigDustGreen: Config[] = [
       },
       board: [],
       chart: [],
-       gallery: [
+      gallery: [
         {
           type: 'A',
           readFrom: 'atomObj',
@@ -1232,7 +1232,7 @@ export const testConfigDustGreen: Config[] = [
   {
     deviceType: '',
     moduleName: '隔爆设施管理台账',
-   pageType: 'dust-green',
+    pageType: 'dust-green',
     moduleData: {
       header: {
         show: false,
@@ -1264,7 +1264,7 @@ export const testConfigDustGreen: Config[] = [
       chart: [],
       gallery: [],
       gallery_list: [],
-     table: [
+      table: [
         {
           type: 'C',
           readFrom: 'devGbsb',
@@ -1298,7 +1298,7 @@ export const testConfigDustGreen: Config[] = [
   {
     deviceType: 'statics',
     moduleName: '粉尘静态指标',
-      pageType: 'dust-green',
+    pageType: 'dust-green',
     moduleData: {
       header: {
         show: false,
@@ -1362,7 +1362,7 @@ export const testConfigDustGreen: Config[] = [
       position: 'bottom:15px;right:15px;',
     },
   },
-]; 
+];
 
 export const testConfigFire: Config[] = [
   {
@@ -1907,7 +1907,7 @@ export const testConfigFireGreen: Config[] = [
           },
         ],
       },
-       board: [
+      board: [
         {
           type: 'A',
           readFrom: 'fireManageInfo',
@@ -1929,7 +1929,7 @@ export const testConfigFireGreen: Config[] = [
       gallery_list: [],
       table: [],
       list: [],
-    complex_list: [
+      complex_list: [
         {
           type: 'D',
           readFrom: 'fireManageInfo.sysList',
@@ -1969,7 +1969,7 @@ export const testConfigFireGreen: Config[] = [
     moduleName: '带式输送机防灭火监控系统',
     pageType: 'fire-green',
     moduleData: {
-        header: {
+      header: {
         show: true,
         readFrom: '',
         selector: {
@@ -2056,7 +2056,7 @@ export const testConfigFireGreen: Config[] = [
     moduleName: '工作面光纤监测',
     pageType: 'fire-green',
     moduleData: {
-          header: {
+      header: {
         show: true,
         readFrom: 'devGxcw',
         selector: {
@@ -2152,7 +2152,7 @@ export const testConfigFireGreen: Config[] = [
       },
       board: [],
       chart: [],
-     
+
       gallery: [],
       gallery_list: [
         {
@@ -2206,7 +2206,7 @@ export const testConfigFireGreen: Config[] = [
         },
       ],
       table: [],
-     list: [
+      list: [
         {
           type: 'E',
           readFrom: 'arrayCount',
@@ -2235,7 +2235,6 @@ export const testConfigFireGreen: Config[] = [
               color: 'blue',
               info: '',
             },
-           
           ],
         },
       ],
@@ -2288,7 +2287,7 @@ export const testConfigFireGreen: Config[] = [
       chart: [],
       gallery: [],
       gallery_list: [],
-       table: [
+      table: [
         {
           type: 'C',
           readFrom: 'aqjkArray',
@@ -2305,7 +2304,6 @@ export const testConfigFireGreen: Config[] = [
               name: '预警级别',
               prop: 'warnLevel',
             },
-           
           ],
         },
       ],
@@ -3001,8 +2999,8 @@ export const testConfigVentNew: Config[] = [
           show: true,
           value: '运行风机：${readData.Fan1StartStatus}',
           trans: {
-            '1': '一号',
-            '0': '二号',
+            '1': '1#风机',
+            '0': '2#风机',
           },
         },
       },
@@ -3408,7 +3406,7 @@ export const testConfigVentNew: Config[] = [
             },
             {
               label: '等积孔',
-              value: '${dengjikong_merge}',
+              value: '${dengjikong.value}',
             },
           ],
         },

src/views/vent/home/configurable/dustNew.vue

@@ -63,12 +63,12 @@ onMounted(() => {
   fetchConfigs('New_dust').then(() => {
     configs.value = testConfigNewDust;
     getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
     }).then(updateData);
   });
   setInterval(() => {
     getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
     }).then(updateData);
   }, 2000);
 });

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

@@ -3,10 +3,10 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
   sysTypeWarnList = '/safety/ventanalyAlarmLog/sysTypeWarn',
   sysWarn = '/safety/ventanalyAlarmLog/sysWarn',
-  getDevice = '/monitor/device',//实时数据
-  listdays='/safety/ventanalyMonitorData/listdays',//历史数据
-  getHistoryData='/monitor/history/getHistoryData',//历史数据1
-  bjlist='/safety/ventanalyAlarmLog/list'//报警历史数据
+  getDevice = '/monitor/device', //实时数据
+  listdays = '/safety/ventanalyMonitorData/listdays', //历史数据
+  getHistoryData = '/monitor/history/getHistoryData', //历史数据1
+  getHydrology = '/safety/ventanalyDeviceInfo/Hydrology', //水文数据
 }
 
 /**
@@ -37,7 +37,7 @@ export const listdays = (params) => defHttp.get({ url: Api.listdays, params }, {
  *历史数据1
  * @param params
  */
- export const getHistoryData = (params) => defHttp.post({ url: Api.getHistoryData, params });
+export const getHistoryData = (params) => defHttp.post({ url: Api.getHistoryData, params });
 
 /**
  * 报警历史数据
@@ -45,4 +45,8 @@ export const listdays = (params) => defHttp.get({ url: Api.listdays, params }, {
  */
 export const bjlist = (params) => defHttp.get({ url: Api.bjlist, params }, { joinParamsToUrl: true });
 
-
+/**
+ *水文数据
+ * @param params
+ */
+export const getHydrology = (params) => defHttp.get({ url: Api.getHydrology, params });

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

@@ -1,6 +1,7 @@
 import { reactive, markRaw, defineAsyncComponent } from 'vue';
 import { getAssetURL } from '/@/utils/ui';
 import { useGlobSetting } from '/@/hooks/setting';
+import { BasicColumn } from '/@/components/Table';
 
 export const getMaxY = function (param) {
   let maxval = 0;
@@ -180,7 +181,7 @@ export function getMonitorFlag() {
     case 'sdmtjtbetmk': //布尔台
       typeFlag = '2';
       return typeFlag;
-      case 'sdmtjthlgmk': //哈拉钩
+    case 'sdmtjthlgmk': //哈拉钩
       typeFlag = '2';
       return typeFlag;
     default:
@@ -263,7 +264,6 @@ export const ventilateTopList = [
     list: [],
   },
   { id: 3, imgSrc: false, label: '', value: null, text: '--', list: [] },
- 
 ];
 //束管监测选项列表
 export const contentList = [
@@ -388,7 +388,7 @@ export const tabLists = {
 //     title: '序号',
 //     dataIndex: '',
 //     key: 'rowIndex',
-//     width: 60,
+//     width: 100,
 //     align: 'center',
 //     customRender: ({ index }) => {
 //       return `${index + 1}`;
@@ -404,7 +404,7 @@ export const tabLists = {
 //     title: '序号',
 //     dataIndex: '',
 //     key: 'rowIndex',
-//     width: 60,
+//     width: 100,
 //     align: 'center',
 //     customRender: ({ index }) => {
 //       return `${index + 1}`;
@@ -415,3 +415,94 @@ export const tabLists = {
 //   { rowIndex: 3, dataIndex: 'warnLevel_str', width: 80, title: '状态', type: '1', align: 'center' },
 //   { rowIndex: 4, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
 // ];
+
+export const columns: BasicColumn[] = [
+  {
+    title: '序号',
+    width: 100,
+    align: 'center',
+    customRender: ({ index }) => {
+      return `${index + 1}`;
+    },
+  },
+  {
+    title: '采空区名称',
+    dataIndex: 'reserviorName',
+    key: 'reserviorName',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '坝体Id',
+    dataIndex: 'damBodyId',
+    key: 'damBodyId',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '坝体名称',
+    dataIndex: 'dambodyName',
+    key: 'dambodyName',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '测点类别',
+    dataIndex: 'pointType',
+    key: 'pointType',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '测点名称',
+    dataIndex: 'pointTypeName',
+    key: 'pointTypeName',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '测点Id',
+    dataIndex: 'propertyId',
+    key: 'propertyId',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '状态',
+    dataIndex: 's',
+    key: 's',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '当前值',
+    dataIndex: 'v',
+    key: 'v',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '单位',
+    dataIndex: 'pointUnit',
+    key: 'pointUnit',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '采集时间',
+    dataIndex: 't',
+    key: 't',
+    width: 100,
+    align: 'center',
+  },
+];
+
+//分页参数
+export const pagination = {
+  current: 1, // 当前页码
+  pageSize: 10, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  showTotal: (total) => `共 ${total} 条`, // 分页右下角显示信息
+  showSizeChanger: false, // 是否可改变每页显示条数
+  pageSizeOptions: ['5', '10', '20', '50'], // 可选的每页显示条数
+};

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

@@ -54,8 +54,15 @@
             </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" />
+          <BarSingle
+            :xAxisData="xAxisData"
+            :dataSource="windData.levels"
+            height="225px"
+            :chartsColumns="chartsColumns"
+            :option="option"
+            :color="colors"
+            :fontColor="fontColor"
+          />
         </template>
       </ventBox1>
       <ventBox1 class="vent-margin-t-10">
@@ -100,21 +107,28 @@
       </div>
       <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="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">
+            <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"
+                <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" />
+                  transform="translate(755.808 140.636)"
+                  fill="#28a6ff"
+                  opacity="0.7"
+                />
               </g>
             </svg>
           </div>
@@ -122,9 +136,14 @@
             <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"
+                <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" />
+                  transform="translate(722.572 159.023)"
+                  fill="#3dd8ff"
+                  opacity="0.5"
+                />
               </g>
             </svg>
           </div>
@@ -133,21 +152,19 @@
               centerData.levels == 0
                 ? '低风险'
                 : centerData.levels == 101
-                  ? '低风险'
-                  : centerData.levels == 102
-                    ? '一般风险'
-                    : centerData.levels == 103
-                      ? '较大风险'
-                      : centerData.levels == 104
-                        ? '重大风险'
-                        : centerData.levels == 201
-                          ? '报警'
-                          : '未连接'
+                ? '低风险'
+                : centerData.levels == 102
+                ? '一般风险'
+                : centerData.levels == 103
+                ? '较大风险'
+                : centerData.levels == 104
+                ? '重大风险'
+                : centerData.levels == 201
+                ? '报警'
+                : '未连接'
             }}</div>
 
-            <div class="text2">{{ centerData.riskLevel !== undefined && centerData.riskLevel !== null ?
-              centerData.riskLevel
-              : '-' }}</div>
+            <div class="text2">{{ centerData.riskLevel !== undefined && centerData.riskLevel !== null ? centerData.riskLevel : '-' }}</div>
             <div class="text3">风险得分</div>
           </div>
           <div class="icon-animation" @click="warnGradeClick"></div>
@@ -164,16 +181,16 @@
                 centerData.fire == 0
                   ? '低风险'
                   : centerData.fire == 101
-                    ? '低风险'
-                    : centerData.fire == 102
-                      ? '一般风险'
-                      : centerData.fire == 103
-                        ? '较大风险'
-                        : centerData.fire == 104
-                          ? '重大风险'
-                          : centerData.fire == 201
-                            ? '报警'
-                            : centerData.fire
+                  ? '低风险'
+                  : centerData.fire == 102
+                  ? '一般风险'
+                  : centerData.fire == 103
+                  ? '较大风险'
+                  : centerData.fire == 104
+                  ? '重大风险'
+                  : centerData.fire == 201
+                  ? '报警'
+                  : centerData.fire
               }}</span>
             </div>
           </div>
@@ -187,16 +204,16 @@
                 centerData.sb == 0
                   ? '低风险'
                   : centerData.sb == 101
-                    ? '低风险'
-                    : centerData.sb == 102
-                      ? '一般风险'
-                      : centerData.sb == 103
-                        ? '较大风险'
-                        : centerData.sb == 104
-                          ? '重大风险'
-                          : centerData.sb == 201
-                            ? '报警'
-                            : centerData.sb
+                  ? '低风险'
+                  : centerData.sb == 102
+                  ? '一般风险'
+                  : centerData.sb == 103
+                  ? '较大风险'
+                  : centerData.sb == 104
+                  ? '重大风险'
+                  : centerData.sb == 201
+                  ? '报警'
+                  : centerData.sb
               }}</span>
             </div>
           </div>
@@ -210,16 +227,16 @@
                 centerData.fc == 0
                   ? '低风险'
                   : centerData.fc == 101
-                    ? '低风险'
-                    : centerData.fc == 102
-                      ? '一般风险'
-                      : centerData.fc == 103
-                        ? '较大风险'
-                        : centerData.fc == 104
-                          ? '重大风险'
-                          : centerData.fc == 201
-                            ? '报警'
-                            : centerData.fc
+                  ? '低风险'
+                  : centerData.fc == 102
+                  ? '一般风险'
+                  : centerData.fc == 103
+                  ? '较大风险'
+                  : centerData.fc == 104
+                  ? '重大风险'
+                  : centerData.fc == 201
+                  ? '报警'
+                  : centerData.fc
               }}</span>
             </div>
           </div>
@@ -233,16 +250,16 @@
                 centerData.ws == 0
                   ? '低风险'
                   : centerData.ws == 101
-                    ? '低风险'
-                    : centerData.ws == 102
-                      ? '一般风险'
-                      : centerData.ws == 103
-                        ? '较大风险'
-                        : centerData.ws == 104
-                          ? '重大风险'
-                          : centerData.ws == 201
-                            ? '报警'
-                            : centerData.ws
+                  ? '低风险'
+                  : centerData.ws == 102
+                  ? '一般风险'
+                  : centerData.ws == 103
+                  ? '较大风险'
+                  : centerData.ws == 104
+                  ? '重大风险'
+                  : centerData.ws == 201
+                  ? '报警'
+                  : centerData.ws
               }}</span>
               <div class="">
                 <span class="title">矿井瓦斯等级鉴定</span>
@@ -261,34 +278,34 @@
                 centerData.tf == 0
                   ? '低风险'
                   : centerData.tf == 101
-                    ? '低风险'
-                    : centerData.tf == 102
-                      ? '一般风险'
-                      : centerData.tf == 103
-                        ? '较大风险'
-                        : centerData.tf == 104
-                          ? '重大风险'
-                          : centerData.tf == 201
-                            ? '报警'
-                            : centerData.tf
+                  ? '低风险'
+                  : centerData.tf == 102
+                  ? '一般风险'
+                  : centerData.tf == 103
+                  ? '较大风险'
+                  : centerData.tf == 104
+                  ? '重大风险'
+                  : centerData.tf == 201
+                  ? '报警'
+                  : centerData.tf
               }}</span>
             </div>
           </div>
-           <div class="item item6">
+          <div class="item item6" @click="showModal('waterLevel')">
             <div class="icon-box">
               <div class="icon"></div>
             </div>
             <div class="item-monitor-box">
-              <span class="title">水泵</span>
+              <span class="title">水灾</span>
               <span class="value">低风险</span>
             </div>
           </div>
-           <div class="item item7">
+          <div class="item item7">
             <div class="icon-box">
               <div class="icon"></div>
             </div>
             <div class="item-monitor-box">
-              <span class="title">地漏</span>
+              <span class="title">顶板</span>
               <span class="value">低风险</span>
             </div>
           </div>
@@ -299,33 +316,47 @@
         <div class="container">
           <div class="item item1">
             <div class="icon"></div>
-            <vue3-seamless-scroll hover-stop="true" :list="fireMonitor1" :hover="true" 
-              :step="fireMonitor1.length*0.055" :single-waitTime="3000" :limit-scroll-num="fireMonitor1.length" class="seamless-warp1">
+            <vue3-seamless-scroll
+              hover-stop="true"
+              :list="fireMonitor1"
+              :hover="true"
+              :step="fireMonitor1.length * 0.055"
+              :single-waitTime="3000"
+              :limit-scroll-num="fireMonitor1.length"
+              class="seamless-warp1"
+            >
               <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
                 <div class="box-item">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.value1 ? item.value1 : '--' }}</div>
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.value1 ? item.value1 : '--' }}</div
+                  >
                   <div class="title">监测位置</div>
                 </div>
 
                 <div class="box-item">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.warnLevel || '-' }}
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.warnLevel || '-' }}
                   </div>
                   <div class="title">预警等级</div>
                 </div>
                 <div class="box-item1">
-                  <div :class="{
-                    value1: item.warnLevel == '绿色预警',
-                    value2: item.warnLevel == '黄色预警',
-                    value3: item.warnLevel == '红色预警',
-                  }">{{ item.smokeJd || '-' }}
+                  <div
+                    :class="{
+                      value1: item.warnLevel == '绿色预警',
+                      value2: item.warnLevel == '黄色预警',
+                      value3: item.warnLevel == '红色预警',
+                    }"
+                    >{{ item.smokeJd || '-' }}
                   </div>
                   <div class="title">煤自燃阶段</div>
                 </div>
@@ -392,8 +423,15 @@
             </div>
           </div> -->
 
-          <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
-            :option="option" :color="colors" :fontColor="fontColor" />
+          <BarSingle
+            :xAxisData="xAxisData"
+            :dataSource="dustData.levels"
+            height="332px"
+            :chartsColumns="chartsColumns"
+            :option="option"
+            :color="colors"
+            :fontColor="fontColor"
+          />
         </template>
       </ventBox1>
     </div>
@@ -467,9 +505,9 @@ let showToggle = ref('report');
 //点击切换实时\报表数据
 let handlerToggle = () => {
   monitor.value = !monitor.value;
-  windData.jf = monitor.value ?  toggleData.ventInfo.totalIntM3 : toggleData.ventInfo.zongjinfeng ;
-  windData.hf = monitor.value ?  toggleData.ventInfo.totalRetM3: toggleData.ventInfo.zonghuifeng ;
-  windData.levels =monitor.value ? Object.assign({},{alarm:0,blue:0,orange:0,red:0,yellow:0}) :  toggleData.info.sysInfo.ventS.levels;
+  windData.jf = monitor.value ? toggleData.ventInfo.totalIntM3 : toggleData.ventInfo.zongjinfeng;
+  windData.hf = monitor.value ? toggleData.ventInfo.totalRetM3 : toggleData.ventInfo.zonghuifeng;
+  windData.levels = monitor.value ? Object.assign({}, { alarm: 0, blue: 0, orange: 0, red: 0, yellow: 0 }) : toggleData.info.sysInfo.ventS.levels;
   windData.levels['blue'] = warnNumMap.get('vent');
 };
 //风险等级点击
@@ -489,6 +527,10 @@ function showModal(data) {
     case 'dust':
       router.push('/dust/warn/home');
       break;
+    case 'waterLevel':
+      console.log('waterLevel');
+      router.push('/warn/waterLevel/home');
+      break;
     case 'gas':
       router.push('/gas/warn/home');
       break;
@@ -530,12 +572,12 @@ async function getList() {
   } else if (showToggle.value == 'report') {
     windData.jf = res.ventInfo.totalIntM3;
     windData.hf = res.ventInfo.totalRetM3;
-    windData.levels =Object.assign({},{alarm:0,blue:0,orange:0,red:0,yellow:0});
+    windData.levels = Object.assign({}, { alarm: 0, blue: 0, orange: 0, red: 0, yellow: 0 });
     windData.levels['blue'] = warnNumMap.get('vent');
   } else {
     windData.jf = res.ventInfo.totalIntM3;
     windData.hf = res.ventInfo.totalRetM3;
-    windData.levels =Object.assign({},{alarm:0,blue:0,orange:0,red:0,yellow:0});
+    windData.levels = Object.assign({}, { alarm: 0, blue: 0, orange: 0, red: 0, yellow: 0 });
     windData.levels['blue'] = warnNumMap.get('vent');
   }
   windData.xf = res.ventInfo.xufengliang;
@@ -552,12 +594,12 @@ async function getList() {
     Levels.level > 0 && Levels.level <= 1
       ? 101
       : Levels.level > 1 && Levels.level <= 2
-        ? 102
-        : Levels.level > 2 && Levels.level <= 3
-          ? 103
-          : Levels.level > 3 && Levels.level <= 4
-            ? 104
-            : 0;
+      ? 102
+      : Levels.level > 2 && Levels.level <= 3
+      ? 103
+      : Levels.level > 3 && Levels.level <= 4
+      ? 104
+      : 0;
 
   Object.keys(iconsMonitor).forEach((el) => {
     if (res.info.devicekindInfo[el]) {
@@ -662,8 +704,8 @@ onUnmounted(() => {
 
 @{theme-deepblue} {
   .sensor-container {
-    --image-icon-sl:url('/@/assets/images/themify/deepblue/vent/sl.png');
-    --image-icon-dl:url('/@/assets/images/themify/deepblue/vent/dl.png');
+    --image-icon-sl: url('/@/assets/images/themify/deepblue/vent/sl.png');
+    --image-icon-dl: url('/@/assets/images/themify/deepblue/vent/dl.png');
     --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
     --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/border/box2-top-long.png');
     // --image-box-top-bg: url('/@/assets/images/themify/deepblue/vent/box-top-bg.png');
@@ -757,8 +799,8 @@ onUnmounted(() => {
   --image-icon-dust: url('/@/assets/images/vent/alarm/icon-dust.svg');
   --image-icon-gas: url('/@/assets/images/vent/alarm/icon-gas.svg');
   --image-icon-vent: url('/@/assets/images/vent/alarm/icon-vent.svg');
-  --image-icon-sl:url('/@/assets/images/vent/alarm/sl.png');
-  --image-icon-dl:url('/@/assets/images/vent/alarm/dl.png');
+  --image-icon-sl: url('/@/assets/images/vent/alarm/sl.png');
+  --image-icon-dl: url('/@/assets/images/vent/alarm/dl.png');
 
   --image-value-bg: url('/@/assets/images/vent/value-bg.png');
   --image-plane: url('/@/assets/images/vent/plane.png');
@@ -1361,8 +1403,9 @@ onUnmounted(() => {
             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'
-              );
+            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;
           }
         }
@@ -1383,8 +1426,9 @@ onUnmounted(() => {
             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'
-              );
+            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;
           }
         }
@@ -1684,18 +1728,19 @@ onUnmounted(() => {
             background-image: var(--image-icon-vent);
           }
         }
-        .item6{
-          top:0px;
-          left:-30px;
-          .icon{
-            background-image:var(--image-icon-sl);
+        .item6 {
+          top: 0px;
+          left: -30px;
+          z-index: 999;
+          .icon {
+            background-image: var(--image-icon-sl);
           }
         }
-        .item7{
-          top:0px;
-          left:340px;
-          .icon{
-background-image:var(--image-icon-dl)
+        .item7 {
+          top: 0px;
+          left: 340px;
+          .icon {
+            background-image: var(--image-icon-dl);
           }
         }
       }

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

@@ -0,0 +1,104 @@
+<template>
+  <customHeader> 水文监测 </customHeader>
+  <div class="gasWarn">
+    <a-button
+      v-if="!hasPermission('waterLevel:return')"
+      preIcon="ant-design:rollback-outlined"
+      type="text"
+      size="small"
+      style="position: absolute; left: 15px; top: 15px; color: #fff"
+      @click="getBack"
+    >
+      返回
+    </a-button>
+    <div class="gas-content">
+      <a-table
+        :height="300"
+        :columns="columns"
+        :data-source="tableData"
+        size="large"
+        :pagination="pagination"
+        class="tableW"
+        @change="pageChange"
+        :scroll="{ y: 800 }"
+      ></a-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+import { getHydrology } from '../common.api';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useRouter } from 'vue-router';
+import { columns, pagination } from '../common.data';
+const { hasPermission } = usePermission();
+let router = useRouter();
+let tableData = ref([]);
+//分页切换
+let pageChange = (val) => {
+  pagination.current = val.current;
+  pagination.pageSize = val.pageSize;
+  getListData();
+};
+//返回首页
+function getBack() {
+  router.push('/monitorChannel/monitor-alarm-home');
+}
+async function getListData() {
+  var params = {
+    pageIndex: pagination.current,
+    pageSize: pagination.pageSize,
+  };
+  const res = await getHydrology(params);
+  if (res?.result) {
+    const parsedResult = JSON.parse(res.result);
+    tableData.value = parsedResult?.data || []; // 默认空数组防undefined
+    pagination.total = parsedResult.total; // 更新总条数
+  }
+}
+onMounted(() => {
+  getListData();
+});
+onUnmounted(() => {});
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+  .gasWarn {
+    --image-no-choice: url('/@/assets/images/themify/deepblue/fire/no-choice.png');
+    --image-choice: url('/@/assets/images/themify/deepblue/fire/choice.png');
+    --image-border: url('/@/assets/images/themify/deepblue/fire/border.png');
+    --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+    --image-top-area: url('/@/assets/images/themify/deepblue/fire/top-area.png');
+  }
+}
+
+.gasWarn {
+  --image-no-choice: url('/@/assets/images/fire/no-choice.png');
+  --image-choice: url('/@/assets/images/fire/choice.png');
+  --image-border: url('/@/assets/images/fire/border.png');
+  --image-bj1: url('/@/assets/images/fire/bj1.png');
+  --image-top-area: url('/@/assets/images/fire/top-area.png');
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+
+  .gas-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin-left: 10px;
+    padding: 15px;
+    background: var(--image-border) no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+  }
+}
+</style>