shuili-vue/src/views/sluice/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">{{ form.wagaName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">水闸巡查责任人：</div>
            <div class="tc-text1">{{ form.createName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">巡查类别：</div>
            <div class="tc-text1">
              {{getDictLabelName(form.category, "maintenanceCategory") }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">水闸巡查开始/结束时间：</div>
            <div class="tc-text1">{{ form.startDate }}/{{ form.endDate }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">巡查部位：</div>
            <div class="tc-text1">{{ form.partsName }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">问题位置：</div>
            <div class="tc-text1">{{ form.position }}</div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">问题等级：</div>
            <div class="tc-text1">
              {{getDictLabelName(form.problemLevel, "maintenanceLevel") }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="tc-text2">具体描述：</div>
            <div class="tc-text1">{{ form.content }}</div>
          </el-col>
          <el-col :span="24">
            <div class="tc-text2">缺陷图片：</div>
            <div class="tc-text1">
              <el-image
                v-for="item in form.problemImages"
                style="width: 240px; height: 135px;margin-right: 16px;"
                :src="item"
                :preview-src-list="form.problemImages">
              </el-image>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import TopBackTitle from "@/components/TopBackTitle/index.vue";
import {calcTableHeight} from "@/mixins/calcTableHeight";
import SyMixMap from "@/views/components/SyMixMap.vue";
import {gettV2Record} from "@/api/sluice/patrolMaintenance";
import {getDictMapData} from "@/api/system/dict/data";

export default {
  components: {
    SyMixMap,
    TopBackTitle,
  },
  mixins: [calcTableHeight],
  data() {
    return {
      maintenanceCategory: [],
      maintenanceLevel: [],
      form: {
        createName: '',
        wagaName: '',
        category: '',
        parts: '',
        partsName: '',
        content: '',
        position: '',
        problemImages: '',
        problemLevel: '',
        startDate: '',
        endDate: '',
      },
    };
  },
  created() {
    this.getDicts("patrol_maintenance_category").then((response) => {
      this.maintenanceCategory = response.data;
    });
    this.getDicts("patrol_maintenance_level").then((response) => {
      this.maintenanceLevel = response.data;
    });
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      const checking = await gettV2Record(this.$route.query.recordId)
      this.form.createName = checking.data.createName
      this.form.wagaName = checking.data.wagaName
      this.form.problems = checking.data.problems
      this.form.category = checking.data.category
      this.form.startDate = checking.data.startDate
      this.form.endDate = checking.data.endDate
      checking.data.problems.forEach(item => {
        if(item.id === this.$route.query.defectId) {
          this.form.content = item.content
          this.form.position = item.position
          this.form.parts = item.parts
          let DictData = checking.data.category === '1' ? 'sz_xs_c_classfy': 'sz_xs_jd_classfy'
          getDictMapData(DictData).then((res) => {
            let parts = ''
            item.parts.forEach((part) => {
              if (parts) {
                parts = parts + ':' + part
              } else {
                parts = part
              }
            })
            this.form.partsName = res.data[parts]
          })
          this.form.problemLevel = item.problemLevel
          this.form.problemImages = item.problemImages
        }
      })
    },

    getDictLabelName(type, dictListName) {
      if (!this[dictListName]) return "";
      return (
        this[dictListName].find((item) => item.dictValue === type)?.dictLabel ||
        ""
      );
    }
  },
};
</script>
<style lang="scss">
.table-box {
  width: 100%;
  height: calc(100% - 50px - 24px);
  margin-top: 24px;
  padding: 16px;
  padding-bottom: 80px;
  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;
    }
  }

}
.tc-text2,.tc-text1 {
  line-height: 22px;
}
</style>