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

<script setup>
import { ref, nextTick, onMounted, reactive } from 'vue';
import SewageBODEchaer from '@/views/sponeScreen/Echarts/SewageBODEchaer.vue';
const { proxy } = getCurrentInstance();

const dateYear = ref(proxy.moment(new Date()).format('YYYY'));
const ListBod = ref([
  {
    name: '东区污水厂',
    value: '1',
  },
  {
    name: '西区污水厂',
    value: '2',
  },
  {
    name: '老马家污水厂',
    value: '3',
  },
  {
    name: '包公湖污水厂',
    value: '4',
  },
]);

const refresh1 = ref(1);
const chartData3 = ref({
  XName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  data1: [200, 150, 200, 220, 240, 110, 135, 140, 130, 240, 180, 150],
  controlMarkLine: [{ typeName: '考核达标(mg/L)', value: '130', Opacity: 1, color: '#e15a6b' }],
  refresh1: 1,
});
const AllData = reactive({
  queryParams: { BODName: '1' },
});
const { queryParams } = toRefs(AllData);
onMounted(() => {});
</script>

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