<template>
  <div id="dataScreening">
    <div class="form">
      <span class="SelectTitle">站点编号:</span>
      <el-input
        v-model="site"
        placeholder="请输入站点编号"
        class="widthinput"
      ></el-input>
      <span class="SelectTitle">时间选择:</span>
      <el-date-picker
        class="data"
        v-model="TimeValue"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>
      <el-select v-model="value1" placeholder="请选择因子一" class="widthinput">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select v-model="value2" placeholder="请选择因子二" class="widthinput">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="search"
        v-has="'Search'"
        >查询</el-button
      >
    </div>
    <div id="echart">
      <div>
        <div style="width:100%;height:400px" ref="chart"></div>
      </div>
      <div>
        <div style="width:100%;height:400px" ref="chart1"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dataScreening",
  data: function() {
    return {
      flag1: false,
      flag2: false,
      site: "",
      TimeValue: [
        this.moment()
          .subtract("days", 3)
          .format("YYYY-MM-DD HH:mm:ss"),
        this.moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }, //时间快捷选项
      loading: "",
      options: [
        {
          value: "TURB",
          label: "SS(mg/L)"
        },
        {
          value: "SBL1",
          label: "流量1(m³/h)"
        },
        {
          value: "SBL2",
          label: "流量2(m³/h)"
        },
        {
          value: "Z",
          label: "水位1(m)"
        },
        {
          value: "ZB",
          label: "水位2(m)"
        },
        {
          value: "PD05",
          label: "降雨量(mm)"
        }
      ],
      value1: "SBL1",
      value2: "Z",
      name1: "",
      name2: ""
    };
  },
  methods: {
    getName() {
      let obj1 = {};
      obj1 = this.options.find(item => {
        return item.value === this.value1;
      });
      this.name1 = obj1.label;
      let obj2 = {};
      obj2 = this.options.find(item => {
        return item.value === this.value2;
      });
      this.name2 = obj2.label;
    },
    getData1() {
      var url =
        this.nozzle.statement +
        "?siteNo=" +
        this.site +
        "&startTime=" +
        this.TimeValue[0] +
        "&endTime=" +
        this.TimeValue[1];
      this.$http.get(url).then(res => {
        this.flag1 = true;
        this.closeLoad();
        let data = res.data;
        var timeList = [];
        var waterList = [];
        var totalSS = [];
        for (let i in data) {
          timeList.push(data[i].tt);
          totalSS.push(data[i].totalSS);
          waterList.push(data[i].totalWater);
        }
        this.initCharts1(timeList, totalSS, waterList);
      });
    },
    getData2() {
      var url =
        this.nozzle.service +
        "?siteNo=" +
        this.site +
        "&startTime=" +
        this.TimeValue[0] +
        "&endTime=" +
        this.TimeValue[1] +
        "&property1=" +
        this.value1 +
        "&property2=" +
        this.value2;
      this.getName();
      this.$http.get(url).then(res => {
        this.flag2 = true;
        this.closeLoad();
        let data = res.data;
        var timeList = [];
        var sbl1AvgList = []; //流量
        var zAvgList = []; //水位
        for (let i in data) {
          timeList.push(data[i].tt);
          sbl1AvgList.push(data[i].value1);
          zAvgList.push(data[i].value2);
        }
        this.initCharts(timeList, sbl1AvgList, zAvgList);
      });
    },
    search() {
      if (this.site == "") {
        this.$message({
          message: "请输入站点编号",
          type: "warning"
        });
        return;
      }
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.getData1();
      this.getData2();
    },
    closeLoad() {
      if (this.flag1 && this.flag2) {
        this.loading.close();
      }
    },
    initCharts(...arr) {
      let legendData = [];
      legendData.push(this.name1, this.name2);
      let myChart = this.$echarts.init(this.$refs.chart);
      // 绘制图表
      var colors = ["#5793f3", "#5793f3"];
      var option = {
        title: {
          bottom: 5,
          left: "center"
        },
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#333"
            }
          }
        },
        grid: {},
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          data: [
            {
              name: legendData[0]
              // icon: "image://" + require("./../../static/images/shixian.png")
            },
            {
              name: legendData[1]
              // icon: "image://" + require("./../../static/images/xuxian.png")
            }
          ],
          textStyle: {
            color: "#409EFF" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: arr[0],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: this.name1,
            position: "left",
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            type: "value",
            name: this.name2,
            position: "right",
            axisLine: {
              lineStyle: {
                color: colors[1]
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: this.name1,
            type: "line",

            data: arr[1]
          },
          {
            name: this.name2,
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted"
                }
              }
            },
            data: arr[2]
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts1(...arr) {
      let myChart = this.$echarts.init(this.$refs.chart1);
      // 绘制图表
      var colors = ["#5793f3", "#5793f3", "#675bba"];
      var option = {
        title: {
          bottom: 5,
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#333"
            }
          }
        },
        color: colors,
        grid: {},
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          data: [
            {
              name: "累计排水量"
              // icon: "image://" + require("./../../static/images/shixian.png")
            },
            {
              name: "SS负荷量"
              // icon: "image://" + require("./../../static/images/xuxian.png")
            }
          ],
          textStyle: {
            color: "#409EFF" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: arr[0],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "累计排水量（m³）",
            position: "left",
            axisLabel: {
              formatter: "{value}"
            },
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            },
            textStyle: {
              color: "#999" //这里用参数代替了
            }
          },
          {
            type: "value",
            name: "SS负荷量(g)",
            position: "right",
            axisLabel: {
              formatter: "{value} "
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        series: [
          {
            name: "累计排水量",
            type: "line",
            data: arr[2]
          },
          {
            name: "SS负荷量",
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  type: "dotted"
                }
              }
            },
            data: arr[1]
          }
        ]
      };
      var option1 = {
        title: {
          bottom: 5,
          left: "center"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#333"
            }
          }
        },
        color: colors,
        grid: {},
        toolbox: {
          feature: {
            dataView: {
              show: true,
              readOnly: false
            },
            restore: {
              show: true
            },
            saveAsImage: {
              show: true
            }
          }
        },
        legend: {
          data: [
            {
              name: "累计排水量"
              // icon: "image://" + require("./../../static/images/shixian.png")
            }
          ],
          textStyle: {
            color: "#999" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true
            },
            data: arr[0],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999" //这里用参数代替了
              }
            },
            axisLine: {
              lineStyle: {
                color: "#333" // 颜色
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "累计排水量（m³）",
            position: "left",
            axisLabel: {
              formatter: "{value}"
            },
            axisLine: {
              lineStyle: {
                color: colors[0]
              }
            }
          }
        ],
        series: [
          {
            name: "累计排水量",
            type: "line",
            data: arr[2]
          }
        ]
      };
      myChart.clear();
      if (this.name1 != "SS(mg/L)" && this.name2 != "SS(mg/L)") {
        myChart.setOption(option1);
      } else {
        myChart.setOption(option);
      }
    }
  }
};
</script>

<style scoped>
/* 顶部搜索 */
.form {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  text-align: left;
  color: var(--white);
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 10px;
}
.form .el-input {
  width: 200px;
  margin: 0 10px;
}
.SelectTitle {
  display: inline-block;
  margin-left: 5px;
  text-align: center;
  height: 60px;
  line-height: 60px;
}
.data {
  width: 28%;
}
.widthinput {
  width: 15%;
}
#echart {
  height: calc(100% - 55px);
  /* background: rgba(53, 53, 53, 0.5); */
}
#echart > div {
  width: 100%;
}
</style>