火灾监测粉尘，瓦斯界面-提交

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

@@ -63,16 +63,16 @@ function btnClick(ind) {
     case 0:
       activeIndex1.value = 0;
       current.value = 'fireWork';
-      menuList.forEach(el=>{
-        el.type='on'
+      menuList.forEach(el => {
+        el.type = 'on'
       })
       //   this.getFireAreaInfoList()
       break;
     case 1:
       activeIndex1.value = 0;
       current.value = 'mainWell';
-      menuList.forEach(el=>{
-        el.type='out'
+      menuList.forEach(el => {
+        el.type = 'out'
       })
       //   this.getFireAreaInfoList()
       break;
@@ -95,6 +95,12 @@ function cardClick(ind, item) {
       current.value = item.type == 'on' ? 'otherMonitor' : 'otherOut';
       //   this.getFireAreaInfoList()
       break;
+    case 3:
+      current.value = item.type == 'on' ? 'dustPage' : '';
+      break;
+    case 4:
+    current.value = item.type == 'on' ? 'gasPage' : '';
+      break;
   }
 }
 

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

@@ -11,6 +11,8 @@ export const menuList = [
   { name: '综采工作面1', warn: '低风险', type: 'on' },
   { name: '密闭工作面1', warn: '低风险', type: 'on' },
   { name: '其他工作面1', warn: '低风险', type: 'on' },
+  { name: '粉尘', warn: '低风险', type: 'on' },
+  { name: '瓦斯', warn: '低风险', type: 'on' },
 ];
 
 //当前加载组件
@@ -21,6 +23,8 @@ export const componentName = {
   mainWell: markRaw(defineAsyncComponent(() => import('./fire/mainWell.vue'))),
   subStation: markRaw(defineAsyncComponent(() => import('./fire/subStation.vue'))),
   otherOut: markRaw(defineAsyncComponent(() => import('./fire/otherOut.vue'))),
+  dustPage: markRaw(defineAsyncComponent(() => import('./fire/dustPage.vue'))),
+  gasPage: markRaw(defineAsyncComponent(() => import('./fire/gasPage.vue'))),
 };
 
 //工作面
@@ -174,8 +178,48 @@ export const echartDataSg = {
     '2023-09-12 13:45',
     '2023-09-12 13:46',
     '2023-09-12 13:47',
+    '2023-09-12 13:40',
+    '2023-09-12 13:41',
+    '2023-09-12 13:42',
+    '2023-09-12 13:43',
+    '2023-09-12 13:44',
+    '2023-09-12 13:45',
+    '2023-09-12 13:46',
+    '2023-09-12 13:47',
+    '2023-09-12 13:40',
+    '2023-09-12 13:41',
+    '2023-09-12 13:42',
+    '2023-09-12 13:43',
+    '2023-09-12 13:44',
+    '2023-09-12 13:45',
+    '2023-09-12 13:46',
+    '2023-09-12 13:47',
+    '2023-09-12 13:40',
+    '2023-09-12 13:41',
+    '2023-09-12 13:42',
+    '2023-09-12 13:43',
+    '2023-09-12 13:44',
+    '2023-09-12 13:45',
+    '2023-09-12 13:46',
+    '2023-09-12 13:47',
+    '2023-09-12 13:40',
+    '2023-09-12 13:41',
+    '2023-09-12 13:42',
+    '2023-09-12 13:43',
+    '2023-09-12 13:44',
+    '2023-09-12 13:45',
+    '2023-09-12 13:46',
+    '2023-09-12 13:47',
+    '2023-09-12 13:40',
+    '2023-09-12 13:41',
+    '2023-09-12 13:42',
+    '2023-09-12 13:43',
+    '2023-09-12 13:44',
+    '2023-09-12 13:45',
+    '2023-09-12 13:46',
+    '2023-09-12 13:47',
   ],
-  yData: [42, 38, 41, 43, 40, 45, 44, 47, 43],
+  yData: [42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43,42, 38, 41, 43, 40, 45, 44, 47, 43],
 };
 
 //密闭参数列表
@@ -416,6 +460,198 @@ export const dataList = [
       },
     ],
   },
+  {
+    fq: '1防区',
+    btnText: '开启灭火器',
+    label: '喷气',
+    value: '正常',
+    contentList: [
+      {
+        id: 0,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气',
+        value: '正常',
+      },
+      {
+        id: 1,
+        imgSrc: getAssetURL('fire/smoke.svg'),
+        label: '喷气1',
+        value: '正常',
+      },
+      {
+        id: 2,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气2',
+        value: '正常',
+      },
+      {
+        id: 3,
+        imgSrc: getAssetURL('fire/warn.svg'),
+        label: '喷气3',
+        value: '正常',
+      },
+    ],
+  },
+  {
+    fq: '2防区',
+    btnText: '开启灭火器',
+    label: '喷气',
+    value: '正常',
+    contentList: [
+      {
+        id: 0,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气',
+        value: '正常',
+      },
+      {
+        id: 1,
+        imgSrc: getAssetURL('fire/smoke.svg'),
+        label: '喷气1',
+        value: '正常',
+      },
+      {
+        id: 2,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气2',
+        value: '正常',
+      },
+      {
+        id: 3,
+        imgSrc: getAssetURL('fire/warn.svg'),
+        label: '喷气3',
+        value: '正常',
+      },
+    ],
+  },
+  {
+    fq: '3防区',
+    btnText: '开启灭火器',
+    label: '喷气',
+    value: '正常',
+    contentList: [
+      {
+        id: 0,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气',
+        value: '正常',
+      },
+      {
+        id: 1,
+        imgSrc: getAssetURL('fire/smoke.svg'),
+        label: '喷气1',
+        value: '正常',
+      },
+      {
+        id: 2,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气2',
+        value: '正常',
+      },
+      {
+        id: 3,
+        imgSrc: getAssetURL('fire/warn.svg'),
+        label: '喷气3',
+        value: '正常',
+      },
+    ],
+  },
+  {
+    fq: '1防区',
+    btnText: '开启灭火器',
+    label: '喷气',
+    value: '正常',
+    contentList: [
+      {
+        id: 0,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气',
+        value: '正常',
+      },
+      {
+        id: 1,
+        imgSrc: getAssetURL('fire/smoke.svg'),
+        label: '喷气1',
+        value: '正常',
+      },
+      {
+        id: 2,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气2',
+        value: '正常',
+      },
+      {
+        id: 3,
+        imgSrc: getAssetURL('fire/warn.svg'),
+        label: '喷气3',
+        value: '正常',
+      },
+    ],
+  },
+  {
+    fq: '2防区',
+    btnText: '开启灭火器',
+    label: '喷气',
+    value: '正常',
+    contentList: [
+      {
+        id: 0,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气',
+        value: '正常',
+      },
+      {
+        id: 1,
+        imgSrc: getAssetURL('fire/smoke.svg'),
+        label: '喷气1',
+        value: '正常',
+      },
+      {
+        id: 2,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气2',
+        value: '正常',
+      },
+      {
+        id: 3,
+        imgSrc: getAssetURL('fire/warn.svg'),
+        label: '喷气3',
+        value: '正常',
+      },
+    ],
+  },
+  {
+    fq: '3防区',
+    btnText: '开启灭火器',
+    label: '喷气',
+    value: '正常',
+    contentList: [
+      {
+        id: 0,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气',
+        value: '正常',
+      },
+      {
+        id: 1,
+        imgSrc: getAssetURL('fire/smoke.svg'),
+        label: '喷气1',
+        value: '正常',
+      },
+      {
+        id: 2,
+        imgSrc: getAssetURL('fire/fire.svg'),
+        label: '喷气2',
+        value: '正常',
+      },
+      {
+        id: 3,
+        imgSrc: getAssetURL('fire/warn.svg'),
+        label: '喷气3',
+        value: '正常',
+      },
+    ],
+  },
 ];
 
 //外应火灾井下消防材料库标题列表1
@@ -454,3 +690,215 @@ export const columnsJd = [
   { rowIndex: 3, dataIndex: 'warningMsg', title: '预警级别', align: 'center', type: '1' },
   { rowIndex: 4, dataIndex: 'dateTime', title: '时间', align: 'center', width: '180px', type: '1' },
 ];
+
+//粉尘
+//顶部区域数据-粉尘
+export const topAreaList = [
+  {
+    id: 0,
+    title: '15218采煤工作面粉尘',
+    content: [
+      { ids: 0, label: '温度(°C)', value: 16.3 },
+      { ids: 1, label: '粉尘浓度(%)', value: 16.3 },
+      { ids: 2, label: '喷雾水压', value: 16.3 },
+      { ids: 3, label: '喷雾装置', value: 16.3 },
+    ],
+  },
+  {
+    id: 1,
+    title: '15218采煤工作面粉尘',
+    content: [
+      { ids: 0, label: '温度(°C)', value: 16.3 },
+      { ids: 1, label: '粉尘浓度(%)', value: 16.3 },
+      { ids: 2, label: '喷雾水压', value: 16.3 },
+      { ids: 3, label: '喷雾装置', value: 16.3 },
+    ],
+  },
+  {
+    id: 2,
+    title: '15218采煤工作面粉尘',
+    content: [
+      { ids: 0, label: '温度(°C)', value: 16.3 },
+      { ids: 1, label: '粉尘浓度(%)', value: 16.3 },
+      { ids: 2, label: '喷雾水压', value: 16.3 },
+      { ids: 3, label: '喷雾装置', value: 16.3 },
+    ],
+  },
+];
+//中间区域数据-粉尘
+export const centerAreaListT = [
+  { id: 0, label: '粉尘浓度(mg/m³)' },
+  { id: 1, label: '总尘浓度(mg/m³)' },
+  { id: 2, label: '呼尘加权容许浓度(mg/m³)' },
+  { id: 3, label: '爆炸浓度(mg/m³)' },
+];
+//中间区域底部数据-粉尘
+export const centerAreaListB = [
+  {
+    id: 0,
+    content: [{ label: '0.00' }],
+  },
+  {
+    id: 1,
+    content: [{ label: '1.00' }, { label: '2.00' }],
+  },
+  {
+    id: 2,
+    content: [{ label: '0.00' }],
+  },
+  {
+    id: 3,
+    content: [{ label: '0.00' }],
+  },
+];
+//粉尘图表数据
+export const echartDataFc = {
+  maxData: [45, 42, 43, 46, 44, 41, 42, 45, 47, 46, 48],
+  minData: [25, 22, 23, 26, 24, 21, 22, 25, 27, 26, 28],
+  aveValue: [35, 32, 33, 36, 34, 31, 32, 35, 37, 36, 38],
+  xData: [
+    '2023-09-12 11:22',
+    '2023-09-12 11:23',
+    '2023-09-12 11:24',
+    '2023-09-12 11:25',
+    '2023-09-12 11:26',
+    '2023-09-12 11:27',
+    '2023-09-12 11:28',
+    '2023-09-12 11:29',
+    '2023-09-12 11:30',
+    '2023-09-12 11:31',
+    '2023-09-12 11:32',
+  ],
+}
+
+//瓦斯
+//瓦斯顶部区域数据
+export const topAreaListWs = [
+  { id: 0, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
+  { id: 1, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
+  { id: 2, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
+  { id: 3, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
+  { id: 4, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
+  { id: 5, label: '北二盘区3-1煤回风巷测风站甲烷&其他&其他', value: '0.00' },
+]
+//测点类型列表-安全监控
+export const pointListWs = [
+  { label: '测点类型1', value: 0 },
+  { label: '测点类型2', value: 1 },
+  { label: '测点类型3', value: 2 }
+]
+//安全监控-表头
+export const tabHeadList = [
+  { id: 0, label: '所属单位' },
+  { id: 1, label: '所属单位1' },
+  { id: 2, label: '所属单位2' },
+  { id: 3, label: '所属单位3' },
+  { id: 4, label: '所属单位4' },
+]
+//安全监控-列表
+export const tableListWs = [
+  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
+  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
+  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
+  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
+  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
+  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
+  { value: 'ceshi', value1: 'ceshi1', value2: 'ceshi2', value3: 'ceshi3', value4: 'ceshi4' },
+]
+//测点类型-瓦斯巡检列表
+export const pointListWs1 = [
+  { label: '测点类型1', value: 0 },
+  { label: '测点类型2', value: 1 },
+  { label: '测点类型3', value: 2 }
+]
+//瓦斯监控列表数据
+export const cardListWs = [
+  {
+      id: 0,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+  {
+      id: 1,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+  {
+      id: 2,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+  {
+      id: 3,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+  {
+      id: 4,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+  {
+      id: 5,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+  {
+      id: 6,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+  {
+      id: 7,
+      label: '甲烷',
+      value: '0.00',
+      listR: [
+          { id: 0, label: '测点编号', value: '7-1' },
+          { id: 1, label: '测点位置', value: '5-2煤辅运大巷18联巷' },
+          { id: 2, label: '数据时间', value: '2023-5-14 11:22:33' },
+          { id: 3, label: '测点状态', value: '正常' },
+      ]
+  },
+]

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

@@ -77,7 +77,7 @@ function getOption() {
                     },
                     axisLine: {
                         lineStyle: {
-                            color: '#0b256f',
+                            color: 'rgba(14, 53, 95)',
                         },
                     },
                     splitLine: {
@@ -109,13 +109,13 @@ function getOption() {
                     },
                     splitLine: {
                         lineStyle: {
-                            color: '#0d2973',
+                            color: 'rgba(14, 53, 95)',
                         },
                     },
                     axisLine: {
                         show: true,
                         lineStyle: {
-                            color: '#0b256f',
+                            color: 'rgba(14, 53, 95)',
                         },
                     },
                     axisTick: {

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

@@ -31,10 +31,10 @@ function getOption() {
         const myChart = echarts.init(line.value)
         let option = {
             grid: {
-                top: '10%',
-                left: '7%',
+                top: '8%',
+                left: '5%',
                 bottom: '14%',
-                right: '7%',
+                right: '5%',
                 //   containLabel: true,
             },
             tooltip: {
@@ -46,12 +46,47 @@ function getOption() {
                     type: 'category',
                     boundaryGap: false,
                     axisLabel: {
-                        formatter: '{value}',
+                        // formatter: '{value}',
                         fontSize: 14,
-                        margin: 20,
+                        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 {
+                                alert('1')
+                                // 将旧标签的值赋给新标签
+                                newParamsName.value = params
+                            }
+                            //将最终的字符串返回
+                            return newParamsName.value
+                        }
+
                     },
                     axisLine: {
                         lineStyle: {
@@ -85,7 +120,7 @@ function getOption() {
                     nameTextStyle: {
                         color: '#fff',
                         fontSize: 12,
-                        lineHeight: 10,
+                        lineHeight: 2,
                     },
                     splitLine: {
                         lineStyle: {
@@ -132,10 +167,14 @@ function getOption() {
                                 [
                                     {
                                         offset: 0,
-                                        color: 'rgba(2, 242, 222,0.5)',
+                                        color: 'rgba(2, 242, 222,0.8)',
+                                    },
+                                    {
+                                        offset: 0.5,
+                                        color: 'rgba(2, 242, 222,0.4)',
                                     },
                                     {
-                                        offset: 0.8,
+                                        offset: 0.9,
                                         color: 'rgba(2, 242, 222,0)',
                                     },
                                 ],

src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

@@ -0,0 +1,232 @@
+<template>
+    <div class="dustPage">
+        <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="center-area">
+            <div class="center-t">
+                <div class="t-box" v-for="(item, index) in centerAreaListT" :key="index">
+                    <div class="box-label">{{ item.label }}</div>
+                </div>
+            </div>
+            <div class="center-b">
+                <div class="b-box" v-for="(item, index) in centerAreaListB" :key="index">
+                    <div class="box-label" v-for="(items, ind) in item.content" :key="ind">{{ items.label }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="bot-area">
+            <echartLine :echartDataGq="echartDataFc"></echartLine>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import { topAreaList, centerAreaListT, centerAreaListB, echartDataFc } from '../fire.data'
+import echartLine from './common/echartLine.vue'
+//顶部区域激活选项
+let activeIndex = ref(0)
+
+//顶部区域选项切换
+function topAreaClick(index) {
+    activeIndex.value = index
+}
+
+
+</script>
+
+<style lang="less" scoped>
+.dustPage {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .top-area {
+        height: 183px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+
+        .top-box {
+            position: relative;
+            width: 480px;
+            height: 160px;
+            background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
+
+            .top-title {
+                position: absolute;
+                left: 50%;
+                top: 6px;
+                transform: translate(-50%, 0);
+            }
+
+            .top-content {
+                position: absolute;
+                top: 33px;
+                left: 0;
+                width: 100%;
+                height: calc(100% - 33px);
+                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;
+
+                    .item-label {
+                        position: absolute;
+                        left: 52px;
+                        top: 50%;
+                        transform: translate(0, -44%);
+                        font-size: 12px;
+                    }
+
+                    .item-value {
+                        position: absolute;
+                        right: 52px;
+                        top: 50%;
+                        transform: translate(0, -44%);
+                        font-size: 12px;
+                        font-family: 'douyuFont';
+                        color: #3df6ff;
+                    }
+                }
+            }
+        }
+
+        .top-box1 {
+            position: relative;
+            width: 480px;
+            height: 183px;
+            background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
+
+            .top-title {
+                position: absolute;
+                left: 50%;
+                top: 6px;
+                transform: translate(-50%, 0);
+            }
+
+            .top-content {
+                position: absolute;
+                top: 33px;
+                left: 0;
+                width: 100%;
+                height: calc(100% - 33px);
+                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;
+
+                    .item-label {
+                        position: absolute;
+                        left: 52px;
+                        top: 50%;
+                        transform: translate(0, -44%);
+                        font-size: 12px;
+                    }
+
+                    .item-value {
+                        position: absolute;
+                        right: 52px;
+                        top: 50%;
+                        transform: translate(0, -44%);
+                        font-size: 12px;
+                        font-family: 'douyuFont';
+                        color: #3df6ff;
+                    }
+                }
+            }
+        }
+    }
+
+    .center-area {
+        height: 258px;
+        margin-bottom: 20px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+
+        .center-t {
+            height: 50%;
+            padding: 0px 80px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background: url('../../../../../assets/images/fire/dz.png') no-repeat;
+            background-size: 100% 100%;
+            box-sizing: border-box;
+
+            .t-box {
+                width: 218px;
+                height: 97px;
+                background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
+
+                .box-label {
+                    text-align: center;
+                }
+            }
+        }
+
+        .center-b {
+            height: 50%;
+            padding: 0px 80px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            box-sizing: border-box;
+
+            .b-box {
+                width: 218px;
+                height: 97px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+
+                .box-label {
+                    width: 169px;
+                    height: 42px;
+                    line-height: 42px;
+                    text-align: center;
+                    margin-bottom: 5px;
+                    color: #3df6ff;
+                    font-family: 'douyuFont';
+                    background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
+                }
+
+            }
+        }
+    }
+
+    .bot-area {
+        height: calc(100% - 471px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+    }
+}
+</style>

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

@@ -226,7 +226,7 @@ function getSgClick(items) {
 
                     &:nth-child(2) {
                         font-family: 'douyuFont';
-                        font-size: 20px;
+                        font-size: 24px;
                         color: #3df6ff;
                     }
                 }

src/views/vent/monitorManager/alarmMonitor/fire/gasPage.vue

@@ -0,0 +1,306 @@
+<template>
+    <div class="gasPage">
+        <div class="top-area">
+            <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
+                <div class="box-label">{{ item.label }}</div>
+                <div class="box-value">{{ `${item.value}%` }}</div>
+            </div>
+        </div>
+        <div class="center-area">
+            <div class="title-c">
+                <div class="text-c">安全监控系统监测点</div>
+                <div class="select-c">
+                    <div class="select-label">测点类型 : </div>
+                    <a-select style="width: 240px; margin-left: 10px" v-model="pointType" allowClear
+                        class="code-mode-select" placeholder="请选择" @change="handleChange">
+                        <a-select-option v-for="device in pointListWs" :key="device.value" :value="device.value">{{
+                            device.label
+                        }}
+                        </a-select-option>
+                    </a-select>
+                </div>
+
+            </div>
+            <div class="content-c">
+                <div class="content-head">
+                    <div class="head-item" v-for="(item, index) in tabHeadList" :key="index">{{ item.label }}</div>
+                </div>
+                <div class="content-body">
+                    <div class="body-tr" v-for="(item, ind) in tableListWs" :key="ind">
+                        <div class="body-td">{{ item.value }}</div>
+                        <div class="body-td">{{ item.value1 }}</div>
+                        <div class="body-td">{{ item.value2 }}</div>
+                        <div class="body-td">{{ item.value3 }}</div>
+                        <div class="body-td">{{ item.value4 }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bot-area">
+            <div class="title-b">
+                <div class="text-b">瓦斯巡检系统监测点</div>
+                <div class="select-b">
+                    <div class="select-label">测点类型 : </div>
+                    <a-select style="width: 240px; margin-left: 10px" v-model="pointType1" allowClear
+                        class="code-mode-select" placeholder="请选择" @change="handleChange1">
+                        <a-select-option v-for="device in pointListWs1" :key="device.value" :value="device.value">{{
+                            device.label
+                        }}
+                        </a-select-option>
+                    </a-select>
+                </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>{{ items.value }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, defineEmits, computed, reactive, onUnmounted, watch, markRaw, defineAsyncComponent } from 'vue';
+import { topAreaListWs, pointListWs, tabHeadList, tableListWs, pointListWs1, cardListWs } from '../fire.data'
+
+//测点类型-安全监控
+let pointType = ref('')
+//测点类型-瓦斯巡检
+let pointType1 = ref('')
+//测点类型-安全监控选项切换
+function handleChange(val) {
+    console.log(val, '安全监测测点类型')
+    pointType.value = val
+}
+//测点类型-瓦斯监测选项切换
+function handleChange1(val) {
+    console.log(val, '瓦斯巡检测点类型')
+    pointType1.value = val
+}
+
+</script>
+
+<style lang="less" scoped>
+.gasPage {
+    width: 100%;
+    height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+
+    .top-area {
+        height: 128px;
+        margin: 10px 0px;
+        display: flex;
+        justify-content: space-between;
+
+        .top-box {
+            position: relative;
+            width: 215px;
+            height: 128px;
+            background: url('../../../../../assets/images/fire/top-area.png') no-repeat;
+
+            .box-label {
+                position: absolute;
+                left: 0;
+                top: 6px;
+                height: 68px;
+                text-align: center;
+                padding: 10px 15px;
+                box-sizing: border-box;
+                word-wrap: break-word;
+            }
+
+            .box-value {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                font-family: 'douyuFont';
+                font-size: 18px;
+                color: #3df6ff;
+                transform: translate(-50%, 0);
+            }
+        }
+    }
+
+    .center-area {
+        height: 280px;
+        padding: 10px 15px;
+        margin-bottom: 10px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+
+        .title-c {
+            height: 30px;
+            margin-bottom: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .text-c {
+                font-family: 'douyuFont';
+                font-size: 16px;
+            }
+
+            .select-c {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+        }
+
+        .content-c {
+            height: calc(100% - 40px);
+
+            .content-head {
+                height: 36px;
+                border-left: 2px solid #1a7187;
+                border-top: 2px solid #1a7187;
+                border-right: 2px solid #1a7187;
+                border-bottom: 2px solid #228fa2;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .head-item {
+                    display: flex;
+                    flex: 1;
+                    height: 100%;
+                    justify-content: center;
+                    align-items: center;
+                    color: #3df6ff;
+                    font-size: 14px;
+
+                }
+            }
+
+            .content-body {
+                height: calc(100% - 36px);
+                overflow-y: auto;
+
+                .body-tr {
+                    height: 36px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    &:nth-child(odd) {
+                        background-color: rgba(9, 46, 84, .8);
+                    }
+
+                    &:nth-child(even) {
+                        background-color: rgba(13, 56, 103, .8);
+                    }
+
+                    .body-td {
+                        display: flex;
+                        flex: 1;
+                        height: 100%;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+            }
+        }
+    }
+
+    .bot-area {
+        height: calc(100% - 438px);
+        padding: 10px 15px 0px 15px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        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: 16px;
+            }
+
+            .select-b {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+            }
+        }
+
+        .content-b {
+            height: calc(100% - 40px);
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+
+            .card-b {
+                position: relative;
+                width: 25%;
+                height: 128px;
+                background: url('../../../../../assets/images/fire/bot-area.png') no-repeat center;
+
+                .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;
+                        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;
+                    right: 32px;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    width: 220px;
+                    height: 128px;
+                    padding: 5px 0px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    box-sizing: border-box;
+
+                    span {
+                        font-size: 14px;
+                    }
+                }
+
+            }
+        }
+    }
+}
+</style>