5.5首页风量图表修改

src/components/chart/BarAndLine.vue

@@ -100,7 +100,7 @@
       initChartsOption();
 
       function initCharts(isRefresh = false) {
-        debugger
+        // debugger
         //轴数据
         if (option.series && option.series.length === chartsColumns.length) {
           let xAxisData = props.dataSource.map((item) => item[props.xAxisPropType]);

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -27,12 +27,12 @@
   function getOption() {
     nextTick(() => {
       const color = '#66ffff';
-      const barWidth = 0.1; // 柱条占比
+      let barWidth = echartData.ydata.length>0 && echartData.ydata.length<=1 ? 0.03 : 0.1; // 柱条占比
 
       function renderItem(params, api) {
         const topCenter = api.coord([api.value(0), api.value(1)]); // 顶点中心
         const width = api.size([0, 1])[0] * barWidth; // 宽度
-        const ballRadius = width * 0.8;
+        const ballRadius = width * 0.6;
         return {
           type: 'group',
           children: [
@@ -61,7 +61,7 @@
           trigger: 'item',
           show: true,
           formatter: function (p) {
-            console.info(p);
+            // console.info(p);
             return p.marker + p.name + ' : ' + p.value;
           },
         },
@@ -181,7 +181,7 @@
             label: {
               normal: {
                 show: true,
-                position: ['-7', '-28'],
+                position: echartData.ydata.length>0 && echartData.ydata.length<=1 ?  ['-17', '-30'] :  ['-20', '-25'],
                 formatter: [' {a|{c}}'].join(','),
                 rich: {
                   a: {

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

@@ -272,10 +272,11 @@ onMounted(async () => { });
 
     .alarm-menu {
       height: 100%;
-      width: 272px;
+      // width: 272px;
+      width: 15%;
 
       .type-btn {
-        width: 192px;
+        width: 68%;
         height: 28px;
         line-height: 28px;
         border: 1px solid #0058ee;
@@ -313,9 +314,9 @@ onMounted(async () => { });
 
         .btn {
           position: relative;
-          width: 212px;
-          height: 99px;
-          margin-bottom: 30px;
+          width: 81%;
+          height: 14%;
+          margin-bottom: 10%;
           font-family: 'douyuFont';
           background: url('../../../../assets/images/fire/no-choice.png') no-repeat;
           background-size: 100% 100%;
@@ -346,9 +347,9 @@ onMounted(async () => { });
 
         .btn1 {
           position: relative;
-          width: 262px;
-          height: 99px;
-          margin-bottom: 30px;
+          width: 100%;
+          height: 14%;
+          margin-bottom: 10%;
           font-family: 'douyuFont';
           background: url('../../../../assets//images//fire/choice.png') no-repeat;
           background-size: 100% 100%;
@@ -380,13 +381,11 @@ onMounted(async () => { });
     }
 
     .alarm-content {
-      width: calc(100% - 282px);
+      width: calc(85% - 10px);
       height: 100%;
       margin-left: 10px;
       background: url('../../../../assets//images/fire/border.png') no-repeat;
       background-size: 100% 100%;
-
-
     }
 
   }

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

@@ -147,32 +147,32 @@ watch(
   box-sizing: border-box;
 
   .top-area {
-    height: 183px;
+    height: 24%;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
-    padding: 0px 15px;
-    box-sizing: border-box;
+ 
 
     .top-box {
       position: relative;
-      width: 480px;
-      height: 160px;
+      width: 32%;
+      height: 88%;
       background: url('../../../../../assets//images/fire/fc-t.png') no-repeat;
+      background-size: 100% 100%;
 
       .top-title {
         position: absolute;
         left: 50%;
-        top: 6px;
+        top: 4%;
         transform: translate(-50%, 0);
       }
 
       .top-content {
         position: absolute;
-        top: 33px;
+        top: 20%;
         left: 0;
         width: 100%;
-        height: calc(100% - 33px);
+        height: 80%;
         display: flex;
         justify-content: flex-start;
         align-items: flex-start;
@@ -184,10 +184,11 @@ watch(
           width: 50%;
           height: 50%;
           background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
+          background-size: 72% 54%;
 
           .item-label {
             position: absolute;
-            left: 54px;
+            left: 20%;
             top: 50%;
             transform: translate(0, -44%);
             font-size: 12px;
@@ -195,7 +196,7 @@ watch(
 
           .item-value {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -205,7 +206,7 @@ watch(
 
           .item-value1 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -215,7 +216,7 @@ watch(
 
           .item-value2 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -225,7 +226,7 @@ watch(
 
           .item-value3 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -235,7 +236,7 @@ watch(
 
           .item-value4 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -245,7 +246,7 @@ watch(
 
           .item-value5 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -255,7 +256,7 @@ watch(
 
           .item-value6 {
             position: absolute;
-            right: 54px;
+            right: 21%;
             top: 50%;
             transform: translate(0, -32%);
             font-size: 12px;
@@ -268,25 +269,24 @@ watch(
   }
 
   .center-area {
-    height: 258px;
+    height: 34%;
     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;
+        width: 14%;
+        height: 75%;
         background: url('../../../../../assets/images/fire/dz1.png') no-repeat;
+        background-size: 100% 100%;
 
         .box-label {
           text-align: center;
@@ -296,44 +296,38 @@ watch(
 
     .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;
+        width: 14%;
+        height: 75%;
         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;
+          width: 78%;
+          height: 44%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
           color: #3df6ff;
           font-family: 'douyuFont';
           background: url('../../../../../assets/images/fire/dz2.png') no-repeat;
+          background-size: 100% 100%;
         }
       }
     }
   }
 
   .bot-area {
-    height: calc(100% - 471px);
+    height: calc(100% - 58% - 30px);
     background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
     background-size: 100% 100%;
   }
 
-  .bot-area1 {
-    height: calc(100% - 278px);
-    background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-    background-size: 100% 100%;
-  }
 }
 </style>