<template>
  <div id="jcsj">
    <div class="pipeMonitor">
      <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">123213213</div>
    </div>
  </div>
</template>

<script setup name="jcsj">
import { ref, reactive, toRefs, onMounted } from 'vue';
import chartOption from '@/views/oneMap/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
const { proxy } = getCurrentInstance();

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

// 监测数据日期搜索
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(() => {
  initPipeChart();
});
</script>

<style lang="scss" scoped>
#jcsj {
  width: 100%;
  height: 100%;
  text-align: center;

  #monitorPipe {
    width: 1300px;
    height: 570px;
    margin-top: 10px;
  }
}
</style>