<template>
  <div class="publicContainerA">
    <div class="partTitleHM">项目评估</div>
    <div class="ConstrucClass">
      <div class="WaterAccumulation">
        <div class="HeadContent">
          <span>积水分析</span>
          <el-form-item prop="date" style="float: right; width: 130px; margin: 7px 20px 0px 0px">
            <el-select v-model="riverIndex" size="small"> </el-select>
          </el-form-item>
        </div>
        <div class="assessment">
          <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
        </div>
      </div>

      <div class="WaterList">
        <div class="DropdownBox">
          <div class="analysis">
            <img :src="pipefx" alt="" class="ICON_zp" />
            <span>片区分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="riverIndex" size="small"> </el-select>
            </el-form-item>
            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="riverIndex" size="small"> </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="xmfx" alt="" class="ICON_zp" />
            <span>项目分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="riverIndex" size="small"> </el-select>
            </el-form-item>
            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="riverIndex" size="small"> </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="DropdownBox">
          <div class="analysis">
            <img :src="ssfx" alt="" class="ICON_zp" />
            <span>设施分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="riverIndex" size="small"> </el-select>
            </el-form-item>
            <el-form-item prop="date" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="riverIndex" size="small"> </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 积水分析
import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';

const chartData2 = ref({
  xAxis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
  yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
  yAxis2: [7, 9, 10, 9, 11, 10, 12, 15, 18],
  yAxis3: [17, 19, 10, 19, 11, 10, 12, 15, 18],
  refresh: 1,
});
const refresh = ref(1);

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

<style lang="scss" scoped>
.publicContainerA {
  margin-top: 10px;
}
.ConstrucClass {
  width: 460px;
  height: calc(100vh - 575px);
  background: #003b6d;
  opacity: 0.8;
  .WaterAccumulation {
    width: 95%;
    height: 270px;
    margin: auto;
    // background: yellow;
    .HeadContent {
      width: 100%;
      height: 40px;
      background: #217dc8;
      border: 1px solid #61aff0;
      position: relative;
      top: 2px;
      span {
        position: relative;
        top: 8px;
        left: 15px;
        color: #ffffff;
        font-family: Source Han Sans CN;
        font-weight: 500;
      }
    }
    .assessment {
      margin-top: 5px;
      width: 100%;
      height: 230px;
      // background: red;
    }
  }
  .WaterList {
    position: relative;
    top: 10px;
    width: 95%;
    height: calc(100vh - 860px);
    margin: auto;
    overflow-x: hidden;
    overflow-y: auto;
    // background: yellow;
    .DropdownBox {
      height: 50px;
      background: #217dc8;
      border: 1px solid #61aff0;
      display: flex;
      justify-content: space-around;
      margin: 5px;
      .analysis {
        width: 50%;
        display: flex;
        align-items: center;
        // background: red;
        .ICON_zp {
          width: 28px;
          height: 28px;
          position: relative;
          top: 32x;
        }
      }
      .Selectionbox {
        width: 50%;
        display: flex;
        align-items: center;
        // background: yellowgreen;
      }
    }
  }
}
</style>