|
@@ -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);
|