<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-18 09:13:34
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-18 09:13:42
 * @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring.vue
 * @Description: 巡检报告-日常监测报告
-->
<template>
  <div class="content">
    <div class="export">
      <el-form
        :model="dailyForm"
        ref="dailyForm"
        size="small"
        :inline="true"
        label-width="5rem"
      >
        <el-form-item label="道路名称" prop="segmentName">
          <el-select
            v-model="dailyForm.segmentName"
            placeholder="请选择路段"
            clearable
          >
            <el-option
              v-for="item in segmentList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          > -->
          <el-button type="primary" @click="exportReport" size="mini"
            >导出报告</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="div-content">
      <one-content></one-content>
    </div>
    <div class="div-content">
      <twe-content></twe-content>
    </div>
    <div class="div-content">
      <three-content></three-content>
    </div>
    <div class="div-content">
      <four-content></four-content>
    </div>
  </div>
</template>

<script>
import OneContent from "./components/one-content.vue";
import TweContent from "./components/twe-content.vue";
import ThreeContent from "./components/three-content.vue";
import FourContent from "./components/four-content.vue";
export default {
  name: "DailyMonitoring",
  components: { OneContent, TweContent, ThreeContent, FourContent },
  data() {
    return {
      dailyForm: {
        segmentName: "",
      },
      // 选择分公司下拉数据
      segmentList: [],
    };
  },
  created() {},
  methods: {
    /**
     * @description: 导出报告
     * @return {*}
     */
    exportReport() {},
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.export {
  height: 5%;
  width: 100%;
  justify-content: flex-end;
}

.div-content {
  width: 49.5%;
  height: 46%;
  background: url("~@/assets/index/road-content.png") no-repeat;
  background-size: 100% 100%;
}
</style>
