shuili-vue/src/views/dike/runManage/patrolMaintenance/componentsDetails/defectDetails.vue

<template>
  <div class="slider-right">
    <!-- <div class="top-title">{{ $router.currentRoute.meta.title }}</div> -->
    <TopBackTitle></TopBackTitle>
    <div class="table-box">
      <div class="form-row-title">缺陷信息</div>
      <div class="defectInformation">
        <el-row>
          <el-col :span="8">
            <div class="tc-text2">堤防名称：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">堤防巡查责任人：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">巡查类别：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">堤防巡查开始/结束时间：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">巡查部位：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">问题位置：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">问题等级：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">具体描述：</div>
            <div class="tc-text1">123</div>
          </el-col>
          <el-col :span="24">
            <div class="tc-text2">缺陷图片：</div>
            <div class="tc-text1">123</div>
          </el-col>
        </el-row>
      </div>
      <div class="form-row-title">养护记录</div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="top">
        <el-row gutter="48">
          <el-col span="8">
            <el-form-item label="维养责任人:" prop="name">
              <el-input
                placeholder="请输入内容"
                v-model="form.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="维养开始/结束时间：" prop="projectName">
              <el-date-picker
                size="small"
                class="ml-10"
                style="width: 100%;"
                v-model="form.time"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="16">
            <el-form-item label="维养详情：" prop="describe">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                maxlength="200"
                show-word-limit
                v-model="form.describe">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="附件：" prop="describe">
          123
        </el-form-item>
      </el-form>

      <el-table
        :height="tableHeight"
        :data="tableData"
        style="margin-bottom: 16px;"
        border
      >
        <el-table-column prop="nspectionLocation" align="center" label="巡查部位" />
        <el-table-column prop="inspectionContent" align="center" label="检查内容" />
      </el-table>
      <div class="form-row-title">验收意见</div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
        <el-row gutter="48">
          <el-col span="8">
            <el-form-item label="复核人:" prop="name">
              <el-input
                placeholder="请输入内容"
                v-model="form.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="复核时间：" prop="projectName">
              <el-date-picker
                size="small"
                class="ml-10"
                style="width: 100%;"
                v-model="form.time"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="16">
            <el-form-item label="复核意见：" prop="describe">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
                maxlength="200"
                show-word-limit
                v-model="form.describe">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import TopBackTitle from "@/components/TopBackTitle/index.vue";
import {calcTableHeight} from "@/mixins/calcTableHeight";
import SyMixMap from "@/views/components/SyMixMap.vue";
import {getRecordDetails, getRecordTraceList} from "@/api/dike";

export default {
  components: {
    SyMixMap,
    TopBackTitle,
  },
  mixins: [calcTableHeight],
  data() {
    return {
      entries: {},
      traceList: [],
      tableData: [{
        nspectionLocation: '堤坡与戗台',
        inspectionContent: '是否坚实平整',
      }],
      form: {
        name: '张三',
        projectName: '项目名称内容',
        dikeName: '堤防名称内容',
        inspectionCategory: '工程巡查',
        time: [],
        describe: '',
      },
      rules: {
        name: [{required: true}],
        projectName: [{required: true}],
        dikeName: [{required: true}],
        inspectionCategory: [{required: true}],
        time: [{required: true}],
        describe: [{required: true}],
      }
    };
  },
  created() {
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      const res = await getRecordDetails(17);
      this.entries = res.data?.entries ? JSON.parse(res.data.entries) : {};
      getRecordTraceList({
        data: {
          recordId: 17,
        },
        params: {
          orderBy: "create_time",
          sort: "desc", // 升序
        },
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        this.traceList =
          res.records
            ?.map((v) => {
              return [v.longitude, v.latitude];
            })
            ?.reverse() || [];
      });

      console.log('this.traceList', this.traceList)
      console.log('this.entries', this.entries)
    }
  },
};
</script>
<style lang="scss">
.table-box {
  width: 100%;
  height: calc(100% - 50px - 24px);
  margin-top: 24px;
  padding: 16px;
  background-color: white;
  overflow: auto;
}
.form-row-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  border-left: 4px solid #36b29e;
  padding-left: 8px;
}
.row-item {
  display: flex;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 16px;
  & > div {
    width: 50%;
  }
}
.defectInformation {
  .el-row {
    margin-bottom: 16px;
    .el-col {
      margin-bottom: 16px;
    }
  }

}
</style>