<template>
  <!-- 管网监测点详情 -->
  <div class="pipeMonitorDetail">
    <el-tabs v-model="tabActive" @tab-change="changeTab">
      <el-tab-pane label="管网剖面" name="1"></el-tab-pane>
      <el-tab-pane label="监测数据" name="2"></el-tab-pane>
    </el-tabs>
    <div class="content">
      <!-- 管网剖面 -->
      <div class="pipePou flex" v-if="tabActive == 1">
        <div class="leftP">
          <!-- 井深 -->
          <div class="part partJ">井深：5.8米</div>

          <!-- 水高度 -->
          <img src="@/assets/images/fhpl/pipeW.png" alt="" class="water" style="height: 80px" />
          <div class="part partW">水深：3.5米</div>

          <!-- 瞬时流量 -->
          <div class="part partL" style="width: 180px">瞬时流量：0.06m³/s</div>

          <!-- 设备 -->
          <img src="@/assets/images/fhpl/equip.png" alt="" class="equipA" />
        </div>
        <div class="rightP">
          <div class="title">基本信息</div>
          <div class="part flex">
            <div class="biaoti">所在位置：</div>
            <div class="cont">东关大街与长青路交叉口</div>
          </div>
          <div class="part flex">
            <div class="biaoti">管网流向：</div>
            <div class="cont">由南到北</div>
          </div>
          <div class="part flex">
            <div class="biaoti">井盖材质：</div>
            <div class="cont">铸铁</div>
          </div>
          <div class="part flex">
            <div class="biaoti">管径：</div>
            <div class="cont">800mm</div>
          </div>
          <div class="part flex">
            <div class="biaoti">安装高度：</div>
            <div class="cont">4.80米</div>
          </div>
          <div class="part flex">
            <div class="biaoti">井深：</div>
            <div class="cont">5.80米</div>
          </div>

          <div class="title" style="margin-top: 50px">实时数据</div>
          <div class="part flex">
            <div class="biaoti">水深：</div>
            <div class="cont">5.50米</div>
          </div>
          <div class="part flex">
            <div class="biaoti">温度：</div>
            <div class="cont">30.8℃</div>
          </div>
          <div class="part flex">
            <div class="biaoti">瞬时流量：</div>
            <div class="cont">0.06m³/s</div>
          </div>
          <div class="part flex">
            <div class="biaoti">SS：</div>
            <div class="cont">38.6mg/L</div>
          </div>
        </div>
      </div>
      <!-- 监测数据 -->
      <div class="pipeMonitor" v-if="tabActive == 2">
        <div class="selectToolList">
          <el-date-picker
            v-model="pipeTime"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 240px"
          />
          <el-button type="primary" @click="changePipeDate" style="margin: -4px 0px 0px 8px">搜索</el-button>
        </div>
        <div id="monitorPipe"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import chartOption from '@/views/oneMap/Echarts/pieChart_1.js';
import * as echarts from 'echarts';

const { proxy } = getCurrentInstance();
const tabActive = ref('1');
const pipeTime = ref([proxy.moment(new Date()).subtract(3, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);

// tab切换
function changeTab(val) {
  if (val == 2) {
    setTimeout(() => {
      initPipeChart();
    });
  }
}
// 监测数据日期搜索
function changePipeDate() {
  initPipeChart();
}

//管网监测趋势图
let pipeChart = null;
const initPipeChart = () => {
  pipeChart && pipeChart.dispose();
  pipeChart = echarts.init(document.getElementById('monitorPipe'));
  chartOption.floodOneMapPipeSupervise.yAxis[0].name = '水位(m)';
  chartOption.floodOneMapPipeSupervise.yAxis[1].name = '雨量(mm)';
  chartOption.floodOneMapPipeSupervise.legend.data = ['水位', '雨量'];
  chartOption.floodOneMapPipeSupervise.series[0].name = '水位';
  chartOption.floodOneMapPipeSupervise.series[1].name = '雨量';
  chartOption.floodOneMapPipeSupervise.series[1].type = 'bar';
  chartOption.floodOneMapPipeSupervise.series[1].barWidth = '10';
  chartOption.floodOneMapPipeSupervise.yAxis[1].inverse = true; //翻转
  chartOption.floodOneMapPipeSupervise.graphic.invisible = true; // 暂无数据
  pipeChart.clear();
  pipeChart.setOption(chartOption.floodOneMapPipeSupervise);
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
// prettier-ignore
.pipeMonitorDetail {
  width: 100%;
  .content {
    height: 600PX;
    .pipePou{
      .leftP{
        width:530PX;
        height: 570PX;
        background: url('@/assets/images/fhpl/pipe.gif') no-repeat;
        background-size:100% 100%;
        position:relative;
        .water{
          position:absolute;
          bottom:50PX;
          left:0px;
          z-index: 10;
          width:530PX;
          height: 128PX;
        }
        .part{
          background: #0874EF;
          border-radius: 12px;
          width:110px;
          height: 26px;
          line-height: 26px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          text-align: center
        }
        .partW{
          position:absolute;
          bottom:190PX;
          left:60px;
          z-index: 10;
        }
        .partJ{
          position:absolute;
          top:175PX;
          right:105px;
          z-index: 10;
        }
        .partL{
          position:absolute;
          bottom:190PX;
          right:20px;
          z-index: 10;
        }
        .equipA{
          position:absolute;
          bottom:60PX;
          left:30px;
          z-index: 15;
          width:470PX;
          height: 339PX;
        }
        
      }
      .rightP{
        margin-left:30px;
        color: #fff;
        .title{
          border-left:5px solid #67BCFA;
          padding-left:8px;
          font-size: 16px;
          font-weight: 600;
          margin-top:20px;
        }
        .part{
          margin:15px 0px 10px 10px;
          color: #C8DBE0;
          font-size: 15px;
          .biaoti{
            width:100px;
          }
        }
      }
    }
    #monitorPipe {
      width: 100%;
      height: 520px;
      margin-top: 10px;
    }
  }
}
</style>