- <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>