<template>
  <div id="yszrfxJCFX">
    <div id="HeaderEcharts"></div>
    <el-divider>管网历史分析</el-divider>
    <div id="BodyFenXi">
      <div class="list1">
        <div class="listLabel">问题日期</div>
        <div class="listValue">2024年7月1日</div>
      </div>
      <div class="list1">
        <div class="listLabel">天气情况</div>
        <div class="listValue">暴雨(24小时降雨量100mm)</div>
      </div>
      <div class="list2">
        <div class="listLabel">问题分析</div>
        <div class="listValue">
          <p>条件库：</p>
          1、雨天降雨； 2、污水管正常满管运行；
          3、降雨期间COD浓度降低，且降雨结束2小时后浓度回升雨前浓度
          <p>推论库：</p>
          疑似是雨水注入到污水管网所致
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="yszrfxJCFX">
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import { getEchart } from "@/api/MonitorAssetsOnMap";
import { riskAnalysisReason } from "@/api/MonitoringAnalysis";

const AllData = reactive({
  chart: null,
  yAxis: [],
  yAxis_Name: "降雨量",
  yAxis2: [],
  yAxis2_Name: "流速",
  yAxis3: [],
  yAxis3_Name: "水深",
  yAxis4: [],
  yAxis4_Name: "COD",
  xAxis: [],
});
const init = () => {
  //先获取Dom上的实例
  let chartDom = echarts.getInstanceByDom(document.getElementById("HeaderEcharts"));
  //然后判断实例是否存在，如果不存在，就创建新实例
  if (chartDom == null) {
    chartDom = echarts.init(document.getElementById("HeaderEcharts"));
    var option = {
      tooltip: {
        trigger: "axis",
        backgroundColor: "#004284",
        borderColor: "#0B9BFF",
        borderRadius: 6, // 设置圆角大小
        // 自定义提示框文本样
        textStyle: {
          // 字体颜色
          color: "white",
          // 字体大小
          fontSize: 14,
        },
      },
      legend: {
        data: [
          AllData.yAxis_Name,
          AllData.yAxis2_Name,
          AllData.yAxis3_Name,
          AllData.yAxis4_Name,
        ],
        textStyle: {
          color: "#FFFFFF",
          fontSize: 12,
        },
      },
      grid: {
        left: 60,
        right: 100,
        bottom: 20,
        containLabel: true,
      },

      xAxis: {
        type: "category",
        boundaryGap: true,
        data: AllData.xAxis,
        axisLabel: {
          color: "rgba(255,255,255,1)",
          fontSize: 12,
          fontFamily: "AlibabaPuHuiTi",
        },
      },
      dataZoom: [
        {
          // show: true,
          show: false,
          height: 4,
          bottom: 10,
          start: 0,
          end: 100,
          handleSize: "100%",
          fillerColor: "#94FA41",
          borderColor: "transparent",
          backgroundColor: "rgba(148, 250, 65, 0.2)",
          handleStyle: {
            color: "#94FA41",
          },
          moveHandleSize: 0,
          textStyle: {
            color: "#fff",
          },
        },
        {
          type: "inside",
          show: true,
          height: 15,
          start: 0,
          end: 100,
        },
      ],
      yAxis: [
        {
          name: AllData.yAxis_Name,
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#19D5FF",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "left",
          inverse: true,
          nameLocation: "start",
          offset: 60,
        },
        {
          name: AllData.yAxis2_Name,
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#55FFC5",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "right",
          offset: 60,
        },
        {
          name: AllData.yAxis3_Name,
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#99FF55",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          offset: 0,
        },

        {
          name: AllData.yAxis4_Name,
          type: "value",
          minInterval: 1,
          axisLabel: {
            color: "#AAC1CF",
            show: true,
          },
          nameTextStyle: {
            color: "#FFC155",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#2161a8",
            },
          },
          alignTicks: true,
          position: "left",
          offset: 0,
        },
      ],
      series: [
        {
          name: AllData.yAxis_Name,
          type: "bar",
          data: AllData.yAxis,
          barWidth: "30%", // 可以是具体像素值 '20px' 或百分比 '50%'
          // 修改数据点颜色
          itemStyle: {
            borderRadius: [0, 0, 50, 50],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#08B1FF" },
              { offset: 1, color: "#19D6FF" },
            ]), // 数据点颜色
          },
        },
        {
          name: AllData.yAxis2_Name,
          type: "line",
          data: AllData.yAxis2,
          yAxisIndex: 1,
          symbolSize: 7,
          // 修改折线颜色
          lineStyle: {
            color: "#55FFC5", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#55FFC5", // 数据点颜色
            width: 4,
          },
        },
        {
          name: AllData.yAxis3_Name,
          type: "line",
          data: AllData.yAxis3,
          yAxisIndex: 2,
          // 修改折线颜色
          lineStyle: {
            color: "#99FF55", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#99FF55", // 数据点颜色
          },
        },
        {
          name: AllData.yAxis4_Name,
          type: "line",
          data: AllData.yAxis4,
          yAxisIndex: 3,
          // 修改折线颜色
          lineStyle: {
            color: "#FFC155", // 折线颜色
            width: 2, // 折线宽度
          },
          // 修改数据点颜色
          itemStyle: {
            color: "#FFC155", // 数据点颜色
          },
        },
      ],
    };
    option && chartDom.setOption(option, true);
    AllData.chart = chartDom;
  }
};
const resizeTheChart = () => {
  if (AllData.chart) {
    AllData.chart.resize();
  }
};
const getChartsData = () => {
  getEchart({
    // stType: props.Getproperties.stType,
    // stCode: props.Getproperties.stCode,
    // dataCode: props.Getproperties.dataCode,
    // start: "2024-07-01 00:00:00",
    // end: "2024-07-01 23:59:59",
    stType: "rainwater_pipeline_quality",
    stCode: "0201460323",
    dataCode: "pipePoint",
    start: "2024-11-26 11:10:03",
    end: "2024-11-27 11:10:03",
  }).then((res) => {
    if (res && res.code == 200) {
      AllData.xAxis = res.data.times;
      res.data.datas.forEach((element) => {
        switch (element.dataKey) {
          case "cond":
            AllData.yAxis4 = element.datas;
            break;
          case "z":
            AllData.yAxis3 = element.datas;
            break;
          case "va":
            AllData.yAxis2 = element.datas;
            break;
          case "pn05":
            AllData.yAxis = element.datas;
            break;
        }
      });
      init();
    }
  });
};
onMounted(() => {
  nextTick(() => {
    getChartsData();
    window.addEventListener("resize", resizeTheChart);
  });
});
</script>

<style lang="scss" scoped>
#yszrfxJCFX {
  width: 100%;
  height: 100%;
  #HeaderEcharts {
    width: 1198px;
    height: 320px;
  }
  #BodyFenXi {
    width: 100%;
    height: 250px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    align-items: center;

    .list1 {
      width: 50%;
      height: 60px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      align-items: center;

      .listLabel {
        width: 200px;
        height: 40px;
        text-align: right;
        box-sizing: border-box;
        padding-right: 30px;
        line-height: 40px;
        color: #ccdfff;
      }

      .listValue {
        width: 250px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 5px;
        color: #8fbffe;
        background: #0d2359;
        border-radius: 5px;
        border: 1px solid #0b9bff;
      }
    }

    .list2 {
      width: 100%;
      height: 190px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      align-items: center;

      .listLabel {
        width: 200px;
        height: 170px;
        line-height: 170px;
        text-align: right;
        box-sizing: border-box;
        padding-right: 30px;
        color: #ccdfff;
      }

      .listValue {
        width: 825px;
        height: 170px;
        box-sizing: border-box;
        padding: 5px;
        color: #8fbffe;
        background: #0d2359;
        border-radius: 5px;
        border: 1px solid #0b9bff;
      }
    }
  }
}
</style>