粉尘监测-修改提交

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

@@ -32,7 +32,7 @@
   );
   function getOption() {
     nextTick(() => {
-      const myChart = echarts.init(line.value);
+      let myChart = echarts.init(line.value);
       let option = {
         grid: {
           top: '15%',

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

@@ -12,18 +12,6 @@
                 </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">{{ item.content }}</div>
-                </div>
-            </div>
-        </div> -->
         <div class="bot-area">
             <echartLine :echartDataGq="echartDataFc" :maxY="maxY"></echartLine>
         </div>
@@ -39,15 +27,13 @@ let props = defineProps({
     listData: Object,
 });
 
-let maxY = ref(3)
+let maxY = ref(0)
 //顶部区域数据
 let topAreaList = reactive<any[]>([])
 
 //顶部区域激活选项
 let activeIndex = ref(0)
 
-//中间区域数据
-// let centerAreaListB = reactive<any[]>([])
 let choiceData = reactive<any[]>([])
 
 //粉尘图表数据
@@ -70,17 +56,10 @@ let echartDataFc = reactive({
 //顶部区域选项切换
 function topAreaClick(index) {
     activeIndex.value = index
-    // centerAreaListB.length = 0
     echartDataFc.maxData.data.length = 0
     echartDataFc.minData.data.length = 0
     echartDataFc.aveValue.data.length = 0
     echartDataFc.xData.length = 0
-    // centerAreaListB.push(
-    //     { content: choiceData[index].readData.dustval || '/' },
-    //     { content: choiceData[index].readData.totalDust || '/' },
-    //     { content: choiceData[index].readData.breathWeighted || '/' },
-    //     { content: choiceData[index].readData.atomizingState || '/' },
-    // )
     choiceData[index].history.forEach(el => {
         echartDataFc.maxData.data.push(el.dustval)
         echartDataFc.minData.data.push(el.ratio)
@@ -89,10 +68,16 @@ function topAreaClick(index) {
     })
 }
 
+function formatRoundNum(num) {
+  let interger = Math.ceil(num)
+  let leng = String(interger).length
+  return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1)
+}
+
 watch(() => props.listData, (val) => {
     if (JSON.stringify(val.common) != '{}') {
         topAreaList.length = 0
-        let dustList=val.common.dust.slice(0,3)
+        let dustList = val.common.dust.slice(0, 3)
         dustList.forEach(el => {
             topAreaList.push({
                 title: el.strinstallpos,
@@ -105,19 +90,12 @@ watch(() => props.listData, (val) => {
             },)
         })
         choiceData = val.common.dust
-        // centerAreaListB.length = 0
         echartDataFc.maxData.data.length = 0
         echartDataFc.minData.data.length = 0
         echartDataFc.aveValue.data.length = 0
         echartDataFc.xData.length = 0
         if (choiceData[activeIndex.value]) {
-            // centerAreaListB.push(
-            //     { content: choiceData[activeIndex.value].readData.dustval || '--' },
-            //     { content: choiceData[activeIndex.value].readData.totalDust || '--' },
-            //     { content: choiceData[activeIndex.value].readData.breathWeighted || '--'},
-            //     { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
-            // )
-
+            
             choiceData[activeIndex.value].history.forEach(el => {
                 echartDataFc.maxData.data.push(el.dustval)
                 echartDataFc.minData.data.push(el.ratio)
@@ -125,21 +103,23 @@ watch(() => props.listData, (val) => {
                 echartDataFc.xData.push(el.time)
             })
 
+            let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
+                return acr > cur ? acr : cur
+            })
+            maxY.value = formatRoundNum(max1 * 1.5)
 
         } else {
             activeIndex.value = 0
-            // centerAreaListB.push(
-            //     { content: choiceData[activeIndex.value].readData.dustval || '--' },
-            //     { content: choiceData[activeIndex.value].readData.totalDust || '--' },
-            //     { content: choiceData[activeIndex.value].readData.breathWeighted || '--' },
-            //     { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
-            // )
             choiceData[activeIndex.value].history.forEach(el => {
                 echartDataFc.maxData.data.push(el.dustval)
                 echartDataFc.minData.data.push(el.ratio)
                 echartDataFc.aveValue.data.push(el.totalDust)
                 echartDataFc.xData.push(el.time)
             })
+            let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
+                return acr > cur ? acr : cur
+            })
+            maxY.value = formatRoundNum(max1 * 1.5)
         }
 
 
@@ -276,64 +256,6 @@ watch(() => props.listData, (val) => {
         }
     }
 
-    // .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);
         height: calc(100% - 193px);