|  | @@ -33,42 +33,8 @@
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |        <div class="ventilate-content">
 | 
	
		
			
				|  |  |          <a-spin :spinning="loading">
 | 
	
		
			
				|  |  | -          <div v-if="!activeIndex">
 | 
	
		
			
				|  |  | -            <div class="work-nav">
 | 
	
		
			
				|  |  | -              <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
 | 
	
		
			
				|  |  | -                <div class="pic" v-if="item.imgSrc"></div>
 | 
	
		
			
				|  |  | -                <div class="content" v-if="item.label && item.value">
 | 
	
		
			
				|  |  | -                  <span>{{ item.label }}</span>
 | 
	
		
			
				|  |  | -                  <span>{{ item.value }}</span>
 | 
	
		
			
				|  |  | -                </div>
 | 
	
		
			
				|  |  | -                <div :style="{ color: item.text == '正常' ? 'var(--vent-table-action-link)' : '#ff2313' }"
 | 
	
		
			
				|  |  | -                  style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold" v-if="item.text">
 | 
	
		
			
				|  |  | -                  {{ item.text }}
 | 
	
		
			
				|  |  | -                </div>
 | 
	
		
			
				|  |  | -                <div class="percent" v-if="item.list.length != 0">
 | 
	
		
			
				|  |  | -                  <div class="title">{{ item.label }}</div>
 | 
	
		
			
				|  |  | -                  <div class="value">
 | 
	
		
			
				|  |  | -                    <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
 | 
	
		
			
				|  |  | -                      <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
 | 
	
		
			
				|  |  | -                      <span style="color: var(--vent-table-action-link); margin-left: 10px">{{ items.value }}</span>
 | 
	
		
			
				|  |  | -                    </div>
 | 
	
		
			
				|  |  | -                  </div>
 | 
	
		
			
				|  |  | -                </div>
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            <div class="bot-area">
 | 
	
		
			
				|  |  | -              <div class="title-t">
 | 
	
		
			
				|  |  | -                <div class="text-t">通风信息状态监测</div>
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -              <div class="echart-boxd">
 | 
	
		
			
				|  |  | -                <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :minY="minY" :echartDw="echartDw" />
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -          <div v-else>
 | 
	
		
			
				|  |  | -            <MonitorTable ref="tunMonitorRef" :columns="ventTunColumns" :dataSource="ventTunDataSource"
 | 
	
		
			
				|  |  | -              :isShowSelect="false" :scroll="{ y: 300 }" title="巷道阻力分析" />
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | +          <TopArea :activeIndex="activeIndex" :statusData="ventilateTopList" :echartData="echartDataFc1"
 | 
	
		
			
				|  |  | +            :ventTunDataSource="ventTunDataSource" :maxY="maxY" :minY="minY"></TopArea>
 | 
	
		
			
				|  |  |          </a-spin>
 | 
	
		
			
				|  |  |        </div>
 | 
	
		
			
				|  |  |      </div>
 | 
	
	
		
			
				|  | @@ -88,12 +54,10 @@ import { useGlobSetting } from '/@/hooks/setting';
 | 
	
		
			
				|  |  |  import { useRouter } from 'vue-router';
 | 
	
		
			
				|  |  |  import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
 | 
	
		
			
				|  |  |  import { ventilateTopList, typeMenuListTf, getMaxY, getMinY } from '../common.data';
 | 
	
		
			
				|  |  | -import MonitorTable from '../../comment/MonitorTable.vue';
 | 
	
		
			
				|  |  |  import CustomHeader from '/@/components/vent/customHeader.vue';
 | 
	
		
			
				|  |  | -import echartLine from '../common/echartLine.vue';
 | 
	
		
			
				|  |  |  import MeasurePoint from '../common/measurePoint.vue';
 | 
	
		
			
				|  |  | -import { ventTunColumns } from '../alarm.data';
 | 
	
		
			
				|  |  |  import { realTimeNetCal, modalParam } from '../alarm.api';
 | 
	
		
			
				|  |  | +import TopArea from '../common/top-area.vue';
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  //巷道阻力分析数据
 | 
	
		
			
				|  |  |  let hdData = reactive({
 | 
	
	
		
			
				|  | @@ -115,7 +79,7 @@ let activeIndex1 = ref(0);
 | 
	
		
			
				|  |  |  let maxY = ref<any>(0);
 | 
	
		
			
				|  |  |  let minY = ref<any>(0)
 | 
	
		
			
				|  |  |  const loading = ref(false);
 | 
	
		
			
				|  |  | -let echartDw = ref('(m³/min)');
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |  //通风图表数据
 | 
	
		
			
				|  |  |  const echartDataFc1 = reactive<any>({
 | 
	
		
			
				|  |  |    maxData: {
 | 
	
	
		
			
				|  | @@ -156,9 +120,13 @@ function btnClick(ind) {
 | 
	
		
			
				|  |  |  //点击切换实时\报表数据
 | 
	
		
			
				|  |  |  let handlerToggle = () => {
 | 
	
		
			
				|  |  |    monitor.value = !monitor.value;
 | 
	
		
			
				|  |  | -  ventilateTopList[0].value = monitor.value ? toggleData.faceIntM3  : toggleData.jin;
 | 
	
		
			
				|  |  | -  ventilateTopList[1].value = monitor.value ? toggleData.faceRetM3 : toggleData.hui ;
 | 
	
		
			
				|  |  | -  if (monitor.value ) {
 | 
	
		
			
				|  |  | +  echartDataFc1.maxData.data.length = 0;
 | 
	
		
			
				|  |  | +  echartDataFc1.minData.data.length = 0;
 | 
	
		
			
				|  |  | +  echartDataFc1.aveValue.data.length = 0;
 | 
	
		
			
				|  |  | +  echartDataFc1.xData.length = 0;
 | 
	
		
			
				|  |  | +  ventilateTopList[0].value = monitor.value ? toggleData.faceIntM3 : toggleData.jin;
 | 
	
		
			
				|  |  | +  ventilateTopList[1].value = monitor.value ? toggleData.faceRetM3 : toggleData.hui;
 | 
	
		
			
				|  |  | +  if (monitor.value) {
 | 
	
		
			
				|  |  |      toggleData.history_report.forEach((v) => {
 | 
	
		
			
				|  |  |        echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
 | 
	
		
			
				|  |  |        echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
 | 
	
	
		
			
				|  | @@ -266,12 +234,12 @@ function getDetailList(param) {
 | 
	
		
			
				|  |  |      } else if (showToggle.value == 'report') {
 | 
	
		
			
				|  |  |        ventilateTopList[0].value = param.faceIntM3;
 | 
	
		
			
				|  |  |        ventilateTopList[1].value = param.faceRetM3;
 | 
	
		
			
				|  |  | -        param.history_report.forEach((v) => {
 | 
	
		
			
				|  |  | -          echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
 | 
	
		
			
				|  |  | -          echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
 | 
	
		
			
				|  |  | -          echartDataFc1.aveValue.data.push(0);
 | 
	
		
			
				|  |  | -          echartDataFc1.xData.push(v.time);
 | 
	
		
			
				|  |  | -        });
 | 
	
		
			
				|  |  | +      param.history_report.forEach((v) => {
 | 
	
		
			
				|  |  | +        echartDataFc1.maxData.data.push(parseFloat(v.faceIntM3));
 | 
	
		
			
				|  |  | +        echartDataFc1.minData.data.push(parseFloat(v.faceRetM3));
 | 
	
		
			
				|  |  | +        echartDataFc1.aveValue.data.push(0);
 | 
	
		
			
				|  |  | +        echartDataFc1.xData.push(v.time);
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  |      } else {
 | 
	
		
			
				|  |  |        ventilateTopList[0].value = monitor.value ? param.faceIntM3 : param.jin;
 | 
	
		
			
				|  |  |        ventilateTopList[1].value = monitor.value ? param.faceRetM3 : param.hui;
 | 
	
	
		
			
				|  | @@ -299,8 +267,6 @@ function getDetailList(param) {
 | 
	
		
			
				|  |  |      let echartD = [echartDataFc1.maxData.data, echartDataFc1.minData.data]
 | 
	
		
			
				|  |  |      maxY.value = getMaxY(echartD)
 | 
	
		
			
				|  |  |      minY.value = getMinY(echartD)
 | 
	
		
			
				|  |  | -    console.log(maxY.value, 'yMax---')
 | 
	
		
			
				|  |  | -    console.log(minY.value, 'yMin---')
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  }
 | 
	
		
			
				|  |  |  //获取通风监控测点信息
 | 
	
	
		
			
				|  | @@ -574,157 +540,6 @@ onUnmounted(() => {
 | 
	
		
			
				|  |  |        padding: 10px 0px;
 | 
	
		
			
				|  |  |        box-sizing: border-box;
 | 
	
		
			
				|  |  |        margin-right: 10px;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -      .work-nav {
 | 
	
		
			
				|  |  | -        height: 30%;
 | 
	
		
			
				|  |  | -        width: 100%;
 | 
	
		
			
				|  |  | -        background: var(--image-bj1) no-repeat center;
 | 
	
		
			
				|  |  | -        background-size: 100% 100%;
 | 
	
		
			
				|  |  | -        display: flex;
 | 
	
		
			
				|  |  | -        justify-content: space-between;
 | 
	
		
			
				|  |  | -        align-items: center;
 | 
	
		
			
				|  |  | -        border-bottom: 3px solid;
 | 
	
		
			
				|  |  | -        border-image: var(--border-image-1) 1 1 1;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .nav {
 | 
	
		
			
				|  |  | -          display: flex;
 | 
	
		
			
				|  |  | -          justify-content: center;
 | 
	
		
			
				|  |  | -          align-items: center;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          &:nth-child(1) {
 | 
	
		
			
				|  |  | -            flex: 1;
 | 
	
		
			
				|  |  | -            height: 100%;
 | 
	
		
			
				|  |  | -            border-right: 2px solid;
 | 
	
		
			
				|  |  | -            border-image: var(--border-image-2) 1 1 1;
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          &:nth-child(2) {
 | 
	
		
			
				|  |  | -            flex: 1;
 | 
	
		
			
				|  |  | -            height: 100%;
 | 
	
		
			
				|  |  | -            border-right: 2px solid;
 | 
	
		
			
				|  |  | -            border-image: var(--border-image-2) 1 1 1;
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          &:nth-child(3) {
 | 
	
		
			
				|  |  | -            flex: 1;
 | 
	
		
			
				|  |  | -            height: 100%;
 | 
	
		
			
				|  |  | -            border-right: 2px solid;
 | 
	
		
			
				|  |  | -            border-image: var(--border-image-2) 1 1 1;
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          &:nth-child(4) {
 | 
	
		
			
				|  |  | -            flex: 1;
 | 
	
		
			
				|  |  | -            color: #b3b8cc;
 | 
	
		
			
				|  |  | -            font-size: 16px;
 | 
	
		
			
				|  |  | -            height: 100%;
 | 
	
		
			
				|  |  | -            border-right: 2px solid;
 | 
	
		
			
				|  |  | -            border-image: var(--border-image-2) 1 1 1;
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          /**
 | 
	
		
			
				|  |  | -            &:nth-child(5) {
 | 
	
		
			
				|  |  | -              flex: 1.4;
 | 
	
		
			
				|  |  | -              height: 100%;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -              .percent {
 | 
	
		
			
				|  |  | -                width: 100%;
 | 
	
		
			
				|  |  | -                height: 82%;
 | 
	
		
			
				|  |  | -                padding: 0px 20px;
 | 
	
		
			
				|  |  | -                box-sizing: border-box;
 | 
	
		
			
				|  |  | -                display: flex;
 | 
	
		
			
				|  |  | -                flex-direction: column;
 | 
	
		
			
				|  |  | -                justify-content: space-around;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                .title {
 | 
	
		
			
				|  |  | -                  font-size: 14px;
 | 
	
		
			
				|  |  | -                  padding: 5px 0px;
 | 
	
		
			
				|  |  | -                  color: #b3b8cc;
 | 
	
		
			
				|  |  | -                  text-align: center;
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                .value {
 | 
	
		
			
				|  |  | -                  display: flex;
 | 
	
		
			
				|  |  | -                  justify-content: space-between;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -                  span {
 | 
	
		
			
				|  |  | -                    font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -                    font-size: 18px;
 | 
	
		
			
				|  |  | -                  }
 | 
	
		
			
				|  |  | -                }
 | 
	
		
			
				|  |  | -              }
 | 
	
		
			
				|  |  | -            }*/
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          .pic {
 | 
	
		
			
				|  |  | -            width: 90px;
 | 
	
		
			
				|  |  | -            height: 90px;
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          .content {
 | 
	
		
			
				|  |  | -            height: 82%;
 | 
	
		
			
				|  |  | -            margin-left: 15px;
 | 
	
		
			
				|  |  | -            color: var(--vent-font-color);
 | 
	
		
			
				|  |  | -            display: flex;
 | 
	
		
			
				|  |  | -            flex-direction: column;
 | 
	
		
			
				|  |  | -            justify-content: space-around;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            span {
 | 
	
		
			
				|  |  | -              font-size: 14px;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -              &:nth-child(1) {
 | 
	
		
			
				|  |  | -                padding: 5px 0px;
 | 
	
		
			
				|  |  | -                color: #b3b8cc;
 | 
	
		
			
				|  |  | -              }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -              &:nth-child(2) {
 | 
	
		
			
				|  |  | -                font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -                font-size: 16px;
 | 
	
		
			
				|  |  | -                color: var(--vent-table-action-link);
 | 
	
		
			
				|  |  | -              }
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .nav:nth-child(1) .pic {
 | 
	
		
			
				|  |  | -          background: var(--image-jinfengliang) no-repeat center;
 | 
	
		
			
				|  |  | -          background-size: 100% 100%;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .nav:nth-child(2) .pic {
 | 
	
		
			
				|  |  | -          background: var(--image-huifengliang) no-repeat center;
 | 
	
		
			
				|  |  | -          background-size: 100% 100%;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .nav:nth-child(3) .pic {
 | 
	
		
			
				|  |  | -          background: var(--image-xufengliang) no-repeat center;
 | 
	
		
			
				|  |  | -          background-size: 100% 100%;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -      .bot-area {
 | 
	
		
			
				|  |  | -        height: calc(100% - 30% - 3px);
 | 
	
		
			
				|  |  | -        padding: 10px;
 | 
	
		
			
				|  |  | -        background: var(--image-bj1) no-repeat;
 | 
	
		
			
				|  |  | -        background-size: 100% 100%;
 | 
	
		
			
				|  |  | -        box-sizing: border-box;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .title-t {
 | 
	
		
			
				|  |  | -          height: 30px;
 | 
	
		
			
				|  |  | -          display: flex;
 | 
	
		
			
				|  |  | -          justify-content: space-between;
 | 
	
		
			
				|  |  | -          align-items: center;
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          .text-t {
 | 
	
		
			
				|  |  | -            font-family: 'douyuFont';
 | 
	
		
			
				|  |  | -            font-size: 14px;
 | 
	
		
			
				|  |  | -            color: var(--vent-font-color);
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -        .echart-boxd {
 | 
	
		
			
				|  |  | -          width: 100%;
 | 
	
		
			
				|  |  | -          height: 250px;
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }
 | 
	
		
			
				|  |  |  
 |