瓦斯监测预警图片修改

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

@@ -86,66 +86,114 @@
       },
     },
   });
-  let typeData = ref<any[]>([]);
-  let pumpUnder = reactive({});
-  let pumpOver = reactive({});
+  let typeData = ref<any[]>(['pump_under']);
+  let pumpUnder = reactive({
+    label:'测试1',
+    data:[
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+    ]
+  });
+  let pumpOver = reactive({
+    label:'测试1',
+    data:[
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+        {name:'1111111111111111111',val:22},
+    ]
+  });
 
-  watch(
-    () => props.gasData,
-    (newV, oldV) => {
-      console.log(newV, 'ccc---');
-      let data = newV.pump;
+//   watch(
+//     () => props.gasData,
+//     (newV, oldV) => {
+//       console.log(newV, 'ccc---');
+//       let data = newV.pump;
 
-      if (data && data.length != 0) {
-        typeData.value = data.map((v) => v.deviceType);
+//       if (data && data.length != 0) {
+//         typeData.value = data.map((v) => v.deviceType);
 
-        let list = {
-          label: '',
-          data: [],
-        };
-        if (typeData.value.includes('pump_under')) {
-          let labelData = getTableHeaderColumns('pump_under_monitor');
-          let param = labelData.map((el: any) => {
-            return {
-              name: el.title,
-              val: el.dataIndex,
-            };
-          });
-          let filterData = data.filter((v) => v.deviceType == 'pump_under')[0];
-          list.label = filterData.strinstallpos;
-          list.data = param.map((item) => {
-            return {
-              name: item.name,
-              val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
-            };
-          });
-          pumpUnder = Object.assign({}, list);
-        } else if (typeData.value.includes('pump_under_31')) {
-          let labelData = getTableHeaderColumns('pump_under_31_monitor');
-          let param = labelData.map((el: any) => {
-            return {
-              name: el.title,
-              val: el.dataIndex,
-            };
-          });
-          let filterData = data.filter((v) => v.deviceType == 'pump_under_31')[0];
-          list.label = filterData.strinstallpos;
-          list.data = param.map((item) => {
-            return {
-              name: item.name,
-              val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
-            };
-          });
-          pumpOver = Object.assign({}, list);
-        }
-      }
-    },
-    { immediate: true }
-  );
+//         let list = {
+//           label: '',
+//           data: [],
+//         };
+//         if (typeData.value.includes('pump_under')) {
+//           let labelData = getTableHeaderColumns('pump_under_monitor');
+//           let param = labelData.map((el: any) => {
+//             return {
+//               name: el.title,
+//               val: el.dataIndex,
+//             };
+//           });
+//           let filterData = data.filter((v) => v.deviceType == 'pump_under')[0];
+//           list.label = filterData.strinstallpos;
+//           list.data = param.map((item) => {
+//             return {
+//               name: item.name,
+//               val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
+//             };
+//           });
+//           pumpUnder = Object.assign({}, list);
+//         } else if (typeData.value.includes('pump_under_31')) {
+//           let labelData = getTableHeaderColumns('pump_under_31_monitor');
+//           let param = labelData.map((el: any) => {
+//             return {
+//               name: el.title,
+//               val: el.dataIndex,
+//             };
+//           });
+//           let filterData = data.filter((v) => v.deviceType == 'pump_under_31')[0];
+//           list.label = filterData.strinstallpos;
+//           list.data = param.map((item) => {
+//             return {
+//               name: item.name,
+//               val: filterData.readData[item.val] && filterData.readData[item.val] != '0' ? filterData.readData[item.val] : '-',
+//             };
+//           });
+//           pumpOver = Object.assign({}, list);
+//         }
+//       }
+//     },
+//     { immediate: true }
+//   );
 
-  onMounted(() => {
-    // initTitle()
-  });
+  onMounted(() => {});
 </script>
 
 <style lang="less" scoped>
@@ -157,7 +205,7 @@
       --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');
+      --image-top-area: url('/@/assets/images/themify/deepblue/fire/gas-top.png');
     }
   }
 
@@ -166,7 +214,7 @@
     --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');
+    --image-top-area: url('/@/assets/images/fire/gas-top.png');
 
     width: 100%;
     height: 100%;
@@ -182,11 +230,11 @@
       height: 100%;
       background: var(--image-top-area) no-repeat center;
       background-size: 100% 100%;
-
+overflow:hidden;
       .box-label {
         position: absolute;
         left: 50%;
-        top: 198px;
+        top: 28px;
         transform: translate(-50%, 0);
         width: 80%;
         font-family: 'douyuFont';
@@ -201,9 +249,10 @@
       .box-values {
         position: absolute;
         left: 50%;
-        top: 26px;
+        top: 70px;
         transform: translate(-50%, 0);
         width: 84%;
+        height:185px;
         display: flex;
         justify-content: space-between;
         align-items: center;