预警管控界面百分比布局修改-提交

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

@@ -572,25 +572,25 @@ export const fireMonitor = [
     value: 0,
   },
   {
-    title: 'CH4最大值(%)',
+    title: 'CH₄最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'C2H4最大值(ppm)',
+    title: 'C₂H₄最大值(ppm)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'CO2最大值(%)',
+    title: 'CO₂最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: '上隅角O2最小值(%)',
+    title: '上隅角O₂最小值(%)',
     code: '',
     level:null,
     value: 0,
@@ -624,25 +624,25 @@ export const fireMonitor1 = [
     value: 0,
   },
   {
-    title: 'CH4最大值(%)',
+    title: 'CH₄最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'C2H4最大值(ppm)',
+    title: 'C₂H₄最大值(ppm)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: 'CO2最大值(%)',
+    title: 'CO₂最大值(%)',
     code: '',
     level:null,
     value: 0,
   },
   {
-    title: '上隅角O2最小值(%)',
+    title: '上隅角O₂最小值(%)',
     code: '',
     level:null,
     value: 0,

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

@@ -51,7 +51,7 @@ export const topList = [
     value: null,
     text: '',
     list: [
-      { id: 0, label: 'O2', value: 0 },
+      { id: 0, label: 'O₂', value: 0 },
       { id: 1, label: 'CO', value: 0 },
     ],
   },
@@ -72,7 +72,7 @@ export const contentList = [
     list: [
       {
         id: '0-0',
-        title: 'O2',
+        title: 'O₂',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -80,7 +80,7 @@ export const contentList = [
       },
       {
         id: '0-1',
-        title: 'C2H4',
+        title: 'C₂H₄',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -101,7 +101,7 @@ export const contentList = [
       },
       {
         id: '1-1',
-        title: 'CH4',
+        title: 'CH₄',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -114,7 +114,7 @@ export const contentList = [
     list: [
       {
         id: '2-0',
-        title: 'CO2',
+        title: 'CO₂',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',
@@ -122,7 +122,7 @@ export const contentList = [
       },
       {
         id: '2-1',
-        title: 'C2H2',
+        title: 'C₂H₂',
         label: '浓度 : ',
         value: '--',
         label1: '时间 : ',

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

@@ -72,7 +72,7 @@ let topContent = reactive({
 //密闭参数列表
 let mbList = reactive([
     {
-        label: 'O2',
+        label: 'O₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -90,7 +90,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CO2',
+        label: 'CO₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -99,7 +99,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CH4',
+        label: 'CH₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -108,7 +108,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H2',
+        label: 'C₂H₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -117,7 +117,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H4',
+        label: 'C₂H₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -132,12 +132,12 @@ let mbList = reactive([
 //当前密闭参数激活选项
 let activeIndex = ref(0)
 //当前激活密闭参数类型
-let type = ref('O2')
+let type = ref('O₂')
 
 let echartDataSg1 = reactive({
     xData: [],
     yData: [],
-    lengedData: 'O2',
+    lengedData: 'O₂',
 })
 let echartDataSgList = reactive<any[]>([])
 
@@ -149,14 +149,14 @@ function btnClick(item, ind) {
     echartDataSg1.yData.length = 0
     echartDataSg1.lengedData = type.value
     switch (type.value) {
-        case 'O2':
+        case 'O₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.o2val)
 
             })
             break;
-        case 'C2H4':
+        case 'C₂H₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.ch2val)
@@ -170,21 +170,21 @@ function btnClick(item, ind) {
 
             })
             break;
-        case 'CH4':
+        case 'CH₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.chval)
 
             })
             break;
-        case 'CO2':
+        case 'CO₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.co2val)
 
             })
             break;
-        case 'C2H2':
+        case 'C₂H₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.gasval)
@@ -219,17 +219,17 @@ watch(() => props.listData, (val) => {
 
             val.bundletube[0].history.forEach(v => {
                 echartDataSg1.xData.push(v.time)
-                if (echartDataSg1.lengedData == 'O2') {
+                if (echartDataSg1.lengedData == 'O₂') {
                     echartDataSg1.yData.push(v.o2val)
-                } else if (echartDataSg1.lengedData == 'C2H4') {
+                } 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 == 'CH4') {
+                } else if (echartDataSg1.lengedData == 'CH₄') {
                     echartDataSg1.yData.push(v.chval)
-                } else if (echartDataSg1.lengedData == 'CO2') {
+                } else if (echartDataSg1.lengedData == 'CO₂') {
                     echartDataSg1.yData.push(v.co2val)
-                } else if (echartDataSg1.lengedData == 'C2H2') {
+                } else if (echartDataSg1.lengedData == 'C₂H₂') {
                     echartDataSg1.yData.push(v.gasval)
                 }
                 echartDataSgList.push(v)
@@ -255,11 +255,11 @@ watch(() => props.listData, (val) => {
 
     .title {
         width: 100%;
-        height: 128px;
+        height: 17%;
         margin-bottom: 20px;
         display: flex;
         justify-content: space-between;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .box {
@@ -282,7 +282,7 @@ watch(() => props.listData, (val) => {
             }
 
             .contents {
-                height: 94px;
+                height: 73%;
 
                 &:nth-child(1) {
                     width: 40%;
@@ -292,10 +292,10 @@ watch(() => props.listData, (val) => {
 
                     img {
                         position: relative;
-                        width: 94px;
-                        height: 94px;
-                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
-                        background-position: 50% 50%;
+                        width: 23%;
+                        height: 100%;
+                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+                        background-size: 50% 50%;
                     }
 
                     .text {
@@ -346,36 +346,38 @@ watch(() => props.listData, (val) => {
 
     .content {
         width: 100%;
-        height: calc(100% - 148px);
+        height: calc(83% - 20px);
         padding: 15px 20px 0px 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        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: 16px;
             color: #3df6ff;
-            margin-bottom: 10px;
         }
 
         .card-btn {
-            height: 169px;
+            height: 28%;
             margin-bottom: 10px;
             display: flex;
             justify-content: space-between;
 
             .box {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/1.png') no-repeat;
+                background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -385,22 +387,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    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;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -409,30 +412,32 @@ watch(() => props.listData, (val) => {
                     }
                 }
 
+               
                 .box-item1 {
-                    top: 32px;
+                    top: 24%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 50%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 75%;
                 }
             }
 
             .box1 {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/2.png') no-repeat;
+                background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -442,22 +447,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    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;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -467,21 +473,21 @@ watch(() => props.listData, (val) => {
                 }
 
                 .box-item1 {
-                    top: 32px;
+                    top: 19%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 41%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 63%;
                 }
             }
         }
 
         .echart-box {
-            height: calc(100% - 215px);
+            height: calc(72% - 41px);
             border: 1px solid #114aac;
 
             .title-f {

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

@@ -136,17 +136,17 @@ watch(() => props.listData, (val) => {
     box-sizing: border-box;
 
     .top-area {
-        height: 183px;
+        height: 24%;
         display: flex;
-        // justify-content: space-between;
         justify-content: flex-start;
         margin-bottom: 10px;
 
         .top-box {
             position: relative;
-            width: 480px;
-            height: 160px;
-            background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
+            width: 30.5%;
+            height: 88%;
+            background: url('../../../../../assets//images/fire/fc-t.png') no-repeat center;
+            background-size: 100% 100%;
             margin: 0px 20px;
 
             .top-title {
@@ -154,16 +154,16 @@ watch(() => props.listData, (val) => {
                 text-align: center;
                 position: absolute;
                 left: 50%;
-                top: 6px;
+                top: 3%;
                 transform: translate(-50%, 0);
             }
 
             .top-content {
                 position: absolute;
-                top: 33px;
+                top: 17%;
                 left: 0;
                 width: 100%;
-                height: calc(100% - 33px);
+                height: 83%;
                 display: flex;
                 justify-content: flex-start;
                 align-items: flex-start;
@@ -175,10 +175,10 @@ watch(() => props.listData, (val) => {
                     width: 50%;
                     height: 50%;
                     background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-
+                    background-size: 72% 50%;
                     .item-label {
                         position: absolute;
-                        left: 52px;
+                        left: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -186,7 +186,7 @@ watch(() => props.listData, (val) => {
 
                     .item-value {
                         position: absolute;
-                        right: 52px;
+                        right: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -199,9 +199,10 @@ watch(() => props.listData, (val) => {
 
         .top-box1 {
             position: relative;
-            width: 480px;
-            height: 183px;
-            background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
+            width: 30.5%;
+            height: 100%;
+            background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat center;
+            background-size: 100% 100%;
             margin: 0px 20px;
 
             .top-title {
@@ -209,16 +210,16 @@ watch(() => props.listData, (val) => {
                 text-align: center;
                 position: absolute;
                 left: 50%;
-                top: 6px;
+                top: 3%;
                 transform: translate(-50%, 0);
             }
 
             .top-content {
                 position: absolute;
-                top: 33px;
+                top: 17%;
                 left: 0;
                 width: 100%;
-                height: calc(100% - 33px);
+                height: 83%;
                 display: flex;
                 justify-content: flex-start;
                 align-items: flex-start;
@@ -232,10 +233,11 @@ watch(() => props.listData, (val) => {
                     width: 50%;
                     height: 50%;
                     background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+                    background-size: 72% 50%;
 
                     .item-label {
                         position: absolute;
-                        left: 52px;
+                        left: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -243,7 +245,7 @@ watch(() => props.listData, (val) => {
 
                     .item-value {
                         position: absolute;
-                        right: 52px;
+                        right: 21%;
                         top: 50%;
                         transform: translate(0, -44%);
                         font-size: 12px;
@@ -256,9 +258,8 @@ watch(() => props.listData, (val) => {
     }
 
     .bot-area {
-        // height: calc(100% - 471px);
-        height: calc(100% - 193px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        height: calc(76% - 10px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
     }
 }

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

@@ -83,7 +83,7 @@ let echartDataGq = reactive({
 let echartDataSg = reactive({
     xData: [],
     yData: [],
-    lengedData: 'O2',
+    lengedData: 'O₂',
 })
 let echartDataSgList = reactive<any[]>([])
 //束管实时数据选项点击
@@ -92,13 +92,13 @@ function getSgClick(items) {
     echartDataSg.yData.length = 0
     echartDataSg.lengedData = items.title
     switch (items.title) {
-        case 'O2':
+        case 'O₂':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.o2val)
             })
             break;
-        case 'C2H4':
+        case 'C₂H₄':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.ch2val)
@@ -110,19 +110,19 @@ function getSgClick(items) {
                 echartDataSg.yData.push(el.coval)
             })
             break;
-        case 'CH4':
+        case 'CH₄':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.chval)
             })
             break;
-        case 'CO2':
+        case 'CO₂':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.co2val)
             })
             break;
-        case 'C2H2':
+        case 'C₂H₂':
             echartDataSgList.forEach(el => {
                 echartDataSg.xData.push(el.time)
                 echartDataSg.yData.push(el.gasval)
@@ -167,17 +167,17 @@ watch(() => props.listData, (val, val1) => {
 
             val.bundletube[0].history.forEach(el => {
                 echartDataSg.xData.push(el.time)
-                if (echartDataSg.lengedData == 'O2') {
+                if (echartDataSg.lengedData == 'O₂') {
                     echartDataSg.yData.push(el.o2val)
-                } else if (echartDataSg.lengedData == 'C2H4') {
+                } else if (echartDataSg.lengedData == 'C₂H₄') {
                     echartDataSg.yData.push(el.ch2val)
-                } else if (echartDataSg.lengedData == 'C2H2') {
+                } else if (echartDataSg.lengedData == 'C₂H₂') {
                     echartDataSg.yData.push(el.gasval)
-                } else if (echartDataSg.lengedData == 'CH4') {
+                } else if (echartDataSg.lengedData == 'CH₄') {
                     echartDataSg.yData.push(el.chval)
                 } else if (echartDataSg.lengedData == 'CO') {
                     echartDataSg.yData.push(el.coval)
-                } else if (echartDataSg.lengedData == 'CO2') {
+                } else if (echartDataSg.lengedData == 'CO₂') {
                     echartDataSg.yData.push(el.co2val)
                 }
                 echartDataSgList.push(el)
@@ -197,10 +197,10 @@ watch(() => props.listData, (val, val1) => {
     box-sizing: border-box;
 
     .work-nav {
-        height: 115px;
+        height: 15%;
         width: 100%;
         margin-bottom: 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         display: flex;
         justify-content: space-between;
@@ -247,7 +247,7 @@ watch(() => props.listData, (val, val1) => {
 
                 .percent {
                     width: 100%;
-                    height: 94px;
+                    height: 82%;
                     padding: 0px 20px;
                     box-sizing: border-box;
                     display: flex;
@@ -274,8 +274,8 @@ watch(() => props.listData, (val, val1) => {
             }
 
             .pic {
-                width: 94px;
-                height: 94px;
+                width: 30%;
+                height: 82%;
 
                 img {
                     width: 100%;
@@ -284,7 +284,7 @@ watch(() => props.listData, (val, val1) => {
             }
 
             .content {
-                height: 94px;
+                height: 82%;
                 margin-left: 15px;
                 color: #fff;
                 display: flex;
@@ -309,28 +309,29 @@ watch(() => props.listData, (val, val1) => {
         }
 
         .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat;
-            background-position: 50% 50%;
+            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;
-            background-position: 50% 50%;
+            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;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
+
         }
     }
 
     .center-echart {
         width: 100%;
-        height: 242px;
+        height: 32%;
         padding: 15px;
         margin-bottom: 20px;
         box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .nav-title {
@@ -355,21 +356,20 @@ watch(() => props.listData, (val, val1) => {
     .bot-content {
         position: relative;
         width: 100%;
-        height: calc(100% - 397px);
+        height: calc(53% - 40px);
         padding: 15px 15px 0px 15px;
         box-sizing: border-box;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .title {
-            height: 32px;
+            height: 30px;
             display: flex;
             justify-content: space-between;
-            margin-bottom: 10px;
 
             .text {
-                height: 32px;
-                line-height: 32px;
+                height: 30px;
+                line-height: 30px;
                 font-family: 'douyuFont';
                 font-size: 16px;
                 color: #3df6ff;
@@ -377,22 +377,22 @@ watch(() => props.listData, (val, val1) => {
         }
 
         .content {
-            height: calc(100% - 42px);
+            height: calc(100% - 30px);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
 
             .box {
                 width: 100%;
-                height: 90px;
+                height: 29%;
                 display: flex;
                 justify-content: space-between;
 
                 .box-item {
                     position: relative;
-                    width: 242px;
+                    width: 16%;
                     height: 100%;
-                    background: url('../../../../../assets/images/fire/14174.png') no-repeat;
+                    background: url('../../../../../assets/images/fire/14174.png') no-repeat center;
                     background-size: 100% 100%;
                     cursor: pointer;
 
@@ -402,24 +402,23 @@ watch(() => props.listData, (val, val1) => {
                         top: 0;
                         transform: translate(-50%);
                         color: #fff;
-                        font-size: 16px;
+                        font-size: 14px;
                     }
 
                     .content-item {
                         position: absolute;
-                        width: 226px;
-                        height: 24px;
-                        line-height: 24px;
+                        width: 93%;
+                        height: 27%;
+                        display: flex;
+                        align-items: center;
                         padding: 0px 10px;
                         box-sizing: border-box;
-                        color: #fff;
-                        font-size: 14px;
-                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
+                        background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
                         background-size: 100% 100%;
 
                         &:nth-child(2) {
                             left: 50%;
-                            top: 26px;
+                            top: 28%;
                             transform: translate(-50%);
                             display: flex;
                             justify-content: space-between;
@@ -427,7 +426,7 @@ watch(() => props.listData, (val, val1) => {
 
                         &:nth-child(3) {
                             left: 50%;
-                            top: 56px;
+                            top: 62%;
                             transform: translate(-50%);
                             display: flex;
                             justify-content: space-between;
@@ -446,10 +445,10 @@ watch(() => props.listData, (val, val1) => {
         .echart-box {
             position: absolute;
             left: 50%;
-            top: 57px;
+            top: 50px;
             transform: translate(-50%, 0);
-            width: calc(100% - 514px);
-            height: calc(100% - 57px);
+            width: 66%;
+            height: calc(100% - 50px);
         }
     }
 }

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

@@ -113,7 +113,7 @@ watch(() => props.listData, (val) => {
     box-sizing: border-box;
 
     .top-area {
-        height: 128px;
+        height: 17%;
         margin: 10px 0px;
         display: flex;
         justify-content: space-between;
@@ -122,7 +122,7 @@ watch(() => props.listData, (val) => {
             position: relative;
             width: 330px;
             height: 128px;
-            background: url('../../../../../assets/images/fire/top-area.png') no-repeat;
+            background: url('../../../../../assets/images/fire/top-area.png') no-repeat center;
             background-size: 100% 100%;
 
             .box-label {
@@ -200,9 +200,9 @@ watch(() => props.listData, (val) => {
 
 
     .bot-area {
-        height: calc(100% - 148px);
+        height: calc(83% - 20px);
         padding: 10px 15px 0px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
 
@@ -314,7 +314,7 @@ watch(() => props.listData, (val) => {
     .bot-area1 {
         height: 100%;
         padding: 10px 15px 0px 15px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         box-sizing: border-box;
 

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

@@ -131,11 +131,11 @@ let topContent = reactive({
 //束管监测当前密闭参数激活选项
 let activeIndex = ref(0)
 //束管监测当前激活密闭参数类型
-let type = ref('O2')
+let type = ref('O₂')
 //束管监测密闭参数列表
 let mbList = reactive([
     {
-        label: 'O2',
+        label: 'O₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -153,7 +153,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CO2',
+        label: 'CO₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -162,7 +162,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'CH4',
+        label: 'CH₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -171,7 +171,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H2',
+        label: 'C₂H₂',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -180,7 +180,7 @@ let mbList = reactive([
         address: '',
     },
     {
-        label: 'C2H4',
+        label: 'C₂H₄',
         label1: '浓度',
         label2: '时间',
         label3: '位置',
@@ -192,7 +192,7 @@ let mbList = reactive([
 let echartDataSg1 = reactive({
     xData: [],
     yData: [],
-    lengedData: 'O2',
+    lengedData: 'O₂',
 })
 let echartDataSgList = reactive<any[]>([])
 
@@ -230,14 +230,14 @@ function btnClick(item, ind) {
     echartDataSg1.yData.length = 0
     echartDataSg1.lengedData = type.value
     switch (type.value) {
-        case 'O2':
+        case 'O₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.o2val)
 
             })
             break;
-        case 'C2H4':
+        case 'C₂H₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.ch2val)
@@ -251,21 +251,21 @@ function btnClick(item, ind) {
 
             })
             break;
-        case 'CH4':
+        case 'CH₄':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.chval)
 
             })
             break;
-        case 'CO2':
+        case 'CO₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.co2val)
 
             })
             break;
-        case 'C2H2':
+        case 'C₂H₂':
             echartDataSgList.forEach(el => {
                 echartDataSg1.xData.push(el.time)
                 echartDataSg1.yData.push(el.gasval)
@@ -312,17 +312,17 @@ watch(() => props.listData, (val) => {
             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 == 'O2') {
+                if (echartDataSg1.lengedData == 'O₂') {
                     echartDataSg1.yData.push(v.o2val)
-                } else if (echartDataSg1.lengedData == 'C2H4') {
+                } 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 == 'CH4') {
+                } else if (echartDataSg1.lengedData == 'CH₄') {
                     echartDataSg1.yData.push(v.chval)
-                } else if (echartDataSg1.lengedData == 'CO2') {
+                } else if (echartDataSg1.lengedData == 'CO₂') {
                     echartDataSg1.yData.push(v.co2val)
-                } else if (echartDataSg1.lengedData == 'C2H2') {
+                } else if (echartDataSg1.lengedData == 'C₂H₂') {
                     echartDataSg1.yData.push(v.gasval)
                 }
                 echartDataSgList.push(v)
@@ -367,10 +367,10 @@ watch(() => props.listData, (val) => {
     overflow-y: auto;
 
     .work-nav {
-        height: 115px;
+        height: 15%;
         width: 100%;
         margin-bottom: 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
         display: flex;
         justify-content: space-between;
@@ -419,8 +419,8 @@ watch(() => props.listData, (val) => {
             }
 
             .pic {
-                width: 94px;
-                height: 94px;
+                width: 26%;
+                height: 84%;
 
                 img {
                     width: 100%;
@@ -429,7 +429,7 @@ watch(() => props.listData, (val) => {
             }
 
             .content {
-                height: 94px;
+                height: 84%;
                 margin-left: 15px;
                 color: #fff;
                 display: flex;
@@ -454,22 +454,23 @@ watch(() => props.listData, (val) => {
         }
 
         .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/max.svg') no-repeat;
-            background-position: 50% 50%;
+            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;
-            background-position: 50% 50%;
+            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;
-            background-position: 50% 50%;
+            background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+            background-size: 50% 50%;
         }
 
 
 
+       
         .box {
             display: flex;
 
@@ -490,7 +491,7 @@ watch(() => props.listData, (val) => {
             }
 
             .contents {
-                height: 94px;
+                height: 73%;
 
                 &:nth-child(1) {
                     width: 40%;
@@ -500,10 +501,10 @@ watch(() => props.listData, (val) => {
 
                     img {
                         position: relative;
-                        width: 94px;
-                        height: 94px;
-                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat;
-                        background-position: 50% 50%;
+                        width: 23%;
+                        height: 100%;
+                        background: url('../../../../../assets/images/fire/pj.svg') no-repeat center;
+                        background-size: 50% 50%;
                     }
 
                     .text {
@@ -551,7 +552,7 @@ watch(() => props.listData, (val) => {
     }
 
     .center-box {
-        height: 355px;
+        height: 47%;
         margin-bottom: 20px;
         display: flex;
         justify-content: space-between;
@@ -559,10 +560,10 @@ watch(() => props.listData, (val) => {
 
         .box {
             display: flex;
-            flex: 1;
             flex-direction: column;
+            width: 32%;
             height: 100%;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
             background-size: 100% 100%;
 
             &:nth-child(2) {
@@ -600,12 +601,12 @@ watch(() => props.listData, (val) => {
     }
 
     .footer-box {
-        height: calc(100% - 510px);
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        height: calc(38% - 40px);
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
         background-size: 100% 100%;
 
         .footer-title {
-            height: 36px;
+            height: 30px;
             padding: 0px 15px;
             display: flex;
             justify-content: space-between;
@@ -618,42 +619,43 @@ watch(() => props.listData, (val) => {
         }
 
         .echart-content {
-            height: calc(100% - 36px);
+            height: calc(100% - 30px);
         }
     }
 
-    .content-s {
+    .content-s{
         width: 100%;
         height: 608px;
         padding: 15px 20px 0px 20px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        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: 16px;
             color: #3df6ff;
-            margin-bottom: 10px;
         }
 
         .card-btn {
-            height: 169px;
+            height: 28%;
             margin-bottom: 10px;
             display: flex;
             justify-content: space-between;
 
             .box {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/1.png') no-repeat;
+                background: url('../../../../../assets/images/fire/1.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -663,22 +665,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    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;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -687,30 +690,32 @@ watch(() => props.listData, (val) => {
                     }
                 }
 
+               
                 .box-item1 {
-                    top: 32px;
+                    top: 24%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 50%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 75%;
                 }
             }
 
             .box1 {
                 position: relative;
-                width: 248px;
+                width: 16%;
                 height: 100%;
-                background: url('../../../../../assets/images/fire/2.png') no-repeat;
+                background: url('../../../../../assets/images/fire/2.png') no-repeat center;
+                background-size: 100% 100%;
                 cursor: pointer;
 
                 .label {
                     position: absolute;
                     left: 50%;
-                    top: 2px;
+                    top: 0;
                     transform: translate(-50%);
                     font-size: 16px;
                     color: #fff;
@@ -720,22 +725,23 @@ watch(() => props.listData, (val) => {
                     position: absolute;
                     left: 50%;
                     transform: translate(-50%, 0);
-                    width: 226px;
-                    height: 27px;
+                    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;
+                    background: url('../../../../../assets/images/fire/contetn.png') no-repeat center;
+                    background-size: 100% 100%;
 
                     .text-t {
-                        width: 32px;
+                        width: 17%;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
-                        width: calc(100% - 32px);
+                        width: 83%;
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
@@ -745,21 +751,21 @@ watch(() => props.listData, (val) => {
                 }
 
                 .box-item1 {
-                    top: 32px;
+                    top: 19%;
                 }
 
                 .box-item2 {
-                    top: 68px;
+                    top: 41%;
                 }
 
                 .box-item3 {
-                    top: 104px;
+                    top: 63%;
                 }
             }
         }
 
         .echart-box {
-            height: calc(100% - 215px);
+            height: calc(72% - 41px);
             border: 1px solid #114aac;
 
             .title-f {