<template>
  <div class="longYW">
    <div class="partTitleHM">
      污水厂进口BOD
      <div class="head-right" style="">
        <el-form-item prop="date" style="width: 55%">
          <el-select v-model="riverIndex"> </el-select>
        </el-form-item>
        <el-form-item style="width: 41%; margin-left: 10px">
          <el-date-picker
            type="year"
            v-model="queryParams.date"
            value-format="YYYY"
            placeholder="请选择年"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
      </div>
    </div>
    <div class="ConstrucClass">
      <SewageBODEchaer :data="chartData3" :refresh1="chartData3.refresh1"></SewageBODEchaer>
    </div>
  </div>
</template>

<script setup>
import SewageBODEchaer from '@/views/sponeScreen/Echarts/SewageBODEchaer.vue';
const refresh1 = ref(1);
const chartData3 = ref({
  XName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  data1: [67, 97, 51, 338, 32, 11, 1, 51, 338, 32, 11, 1],
  data2: [21, 25, 51, 250, 32, 11, 1, 51, 110, 32, 11, 1],

  refresh1: 1,
});
const AllData = reactive({
  queryParams: {},
});
const { queryParams } = toRefs(AllData);
</script>

<style lang="scss" scoped>
.longYW {
  margin-top: 10px;
  width: 100%;
  height: 31%;
  background: #07347f;
  .head-right {
    cursor: pointer;
    position: relative;
    left: 180px;
    top: -36px;
    width: 210px;
    height: 32px;
    display: flex;
    // background: red;
  }
}
.ConstrucClass {
  height: calc(100% - 15%);
  // background: red;
}
</style>